简易地图显示
零 准备工作
- 百度“Echarts”，下载完整版放好，比如放到 'E:\Echarts' 下
- 把空的“地图简易模板.html”文件拷到同一文件夹下
- 注意用notepad++软件打开html文件
壹 数据准备
数据准备分为两部分：一是地图显示数据，二是地图坐标数据
地图显示数据准备
-
地图显示数据的基本格式为：
{name: '北京', value: 10} - 可以在excel中处理好，用Echarts提供的表格工具进行转换
数据准备
- 将转换好的数据替换代码中的
var data = []部分，或存为json共调用（方法略）
地图坐标数据准备
-
地图坐标数据的基本格式为：
'北京': [116.335413, 40.053543] - 可以用工具拾取坐标系统获取百度坐标，在线的批量地址转换坐标工具好像被封了，找到了可以联系我
- 按格式依次整理好数据，没找到现成的批量转换工具，如果点不多的话，可以手动处理下
- 将转换好的数据替换代码中的
var geoCoordMap = {}部分，或存为json共调用（方法略）
贰 地图初始设置
- 在
option = {}下的title中设置图名、副图名、链接
title: {
text: '地图显示', // 图名标题
subtext: '模板使用指南', // 图名副标题
sublink: 'https://www.jianshu.com/p/a8377b25514e', //汤的地图使用简易教程链接
left: 'center'
},
- 在
option = {}下的bmap中设置初始位置、缩放、漫游
bmap: { // 最主要设置的代码部分
center: [116.381346,39.88202], // 设置初始中心位置
zoom: 10, // 设置初始缩放等级
roam: true, // 设置为可漫游
叁 地图风格设置
- 主要在
option = {}下的bmap中设置地图显示要素、颜色、是否显示等
bmap: { // 最主要设置的代码部分
// ......
mapStyle: { // 设置图面要素风格
styleJson: [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#CAE1FF'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#EAEAEA'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#C5C1AA'
}
}, {
'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': {
'color': '#d1d1d1'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#404040'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#CD2626'
}
}, {
'featureType': 'label', // 地图标签，字填充
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}]
}
}
肆 数据显示效果
- 在
series中设置数据的显示效果，比如最简单的散点图
series : [
{
name: '显示图名',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'purple'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: 'blue', // 设置颜色
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]
留几个问题待解决：
- 地图的参数设置在官网的哪个地方？
- 如何批量处理地址数据的坐标转换？
网友评论