echarts地图实现点聚合
时间: 2023-07-07 11:13:54 浏览: 132
要实现ECharts地图上的点聚合,可以使用ECharts提供的MarkerClusterer插件。MarkerClusterer插件可以将地图上的密集的点聚合成一个标识,并显示聚合点的数量。以下是实现步骤:
1. 引入MarkerClusterer插件:
```html
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/bmap.min.js"></script>
```
2. 创建地图和数据:
```javascript
var myChart = echarts.init(document.getElementById('map'));
var option = {
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [
{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
},
{
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
},
{
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
},
{
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
},
{
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
},
{
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
},
{
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}
]
}
},
series: [{
type: 'scatter',
coordinateSystem: 'bmap',
data: [
{name: '北京', value: [116.46, 39.92]},
{name: '上海', value: [121.48, 31.22]},
{name: '广州', value: [113.23, 23.16]},
{name: '深圳', value: [114.07, 22.62]},
{name: '武汉', value: [114.31, 30.52]},
{name: '成都', value: [104.06, 30.67]},
{name: '西安', value: [108.95, 34.27]},
{name: '杭州', value: [120.19, 30.26]},
{name: '南京', value: [118.78, 32.04]},
{name: '沈阳', value: [123.43, 41.81]},
],
symbolSize: 10,
label: {
show: true,
position: 'right',
formatter: function(params) {
return params.data.name;
}
},
itemStyle: {
color: '#FFD700'
}
}]
};
```
3. 使用MarkerClusterer插件实现点聚合:
```javascript
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:data});
```
其中,`map`是地图实例,`data`是散点数据。
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/bmap.min.js"></script>
</head>
<body>
<div id="map" style="width: 800px;height: 600px;"></div>
<script>
var myChart = echarts.init(document.getElementById('map'));
var option = {
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [
{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
},
{
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
},
{
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
},
{
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
},
{
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
},
{
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
},
{
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}
]
}
},
series: [{
type: 'scatter',
coordinateSystem: 'bmap',
data: [
{name: '北京', value: [116.46, 39.92]},
{name: '上海', value: [121.48, 31.22]},
{name: '广州', value: [113.23, 23.16]},
{name: '深圳', value: [114.07, 22.62]},
{name: '武汉', value: [114.31, 30.52]},
{name: '成都', value: [104.06, 30.67]},
{name: '西安', value: [108.95, 34.27]},
{name: '杭州', value: [120.19, 30.26]},
{name: '南京', value: [118.78, 32.04]},
{name: '沈阳', value: [123.43, 41.81]},
],
symbolSize: 10,
label: {
show: true,
position: 'right',
formatter: function(params) {
return params.data.name;
}
},
itemStyle: {
color: '#FFD700'
}
}]
};
myChart.setOption(option);
var map = myChart.getModel().getComponent('bmap').getBMap();
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:data});
</script>
</body>
</html>
```