ECharts如何制作省份地图并在地图上显示自定义图标
2018-01-16 本文已影响4045人
邵佳楠
之前一直被客户提的一个需求烦恼着，他要只显示某个省份的地图，并且呢要在地图上显示小车的图标，还有其它一些点的信息。我以前只用过echarts做过图表，没做过地图，所以自己也是网上看了很多并且看了很多api文档，最后总算是搞出来了，在这里留个笔记方便自己也方便别人。
步入正题之前需要下几个文件
- echats的js文件，自己可以去官网上下
- 地图省份的数据 （可能有的省份不对），这是我的 网盘地址： 密码：8xa9
下面步入正题：
先放上一张效果图（小车图标的位置我是随机生成了，所以有点丑不要介意哈）
效果图
我这里就以显示贵州省的地图为例，首先引入几个JS文件：
<script src="~/Scripts/jquery.js"></script>/*Jquery文件*/
<script src="~/Scripts/echarts.js"></script>/*echarts文件,可从官网下载，我这里用的是3.0的*/
<script src="~/Scripts/guizhou.js"></script>/*省份数据，可从我的网盘中下载*/
<script src="~/Scripts/mapData/ColdCar.js"></script>/*地图上车辆显示的经纬度数据*/
车辆经纬度的数据格式大致如下
var coldCar = [
{
"name": "车辆1",
"value": [107.615944, 27.479744, 2]
},
{
"name": "车辆2",
"value": [108.296644, 27.676476, 2]
}
]
定义一个div标签用来初始化echarts
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="echartMap" style="width: 100%;height:100%;"></div>
具体的JS实现代码
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echartMap'));
var option = {
tooltip: {
show: true,
trigger: 'item',
triggerOn: 'click',
formatter: "名称:{b}<br />坐标:{c}"
},
series: [
{
name: '冷链仓储分布',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
emphasis: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: 10,
showEffectOn: 'render',
itemStyle: {
normal: {
color: '#46bee9'
}
},
data: coldStore
}, {
name: "冷链运输车分布",
type: 'custom',//配置显示方式为用户自定义
coordinateSystem: 'geo',
itemStyle: {
normal: {
color: '#46bee9'
}
},
renderItem: function (params, api) {//具体实现自定义图标的方法
return {
type: 'image',
style: {
image: "../../Content/images/汽车.png",
x: api.coord([
coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
.value[1]
])[0],
y: api.coord([
coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
.value[1]
])[1]
}
}
},
data: coldCar
}, {
name: "高风险食品安全分布",
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'stroke'
},
label: {
emphasis: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: 10,
showEffectOn: 'render',
zlevel: 2,
itemStyle: {
normal: {
color: '#FF4500'
}
},
data: coldFood
}, {
name: "药品安全分布",
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'stroke'
},
label: {
emphasis: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: 10,
showEffectOn: 'render',
zlevel: 2,
itemStyle: {
normal: {
color: '#9932CC'
}
},
data: coldMed
}
],
legend: {
type: "plain",
show: true,
orient: 'vertical',
top: 'middle',
left: 'left',
data: [
{
name: "冷链仓储分布",
icon: "circle",
textStyle: {
color: "#a9d6fa"
}
},
{
name: "冷链运输车分布",
icon: "circle",
textStyle: {
color: "#a9d6fa"
}
},
{
name: "高风险食品安全分布",
icon: "circle",
textStyle: {
color: "#a9d6fa"
}
},
{
name: "药品安全分布",
icon: "circle",
textStyle: {
color: "#a9d6fa"
}
}
]
},
geo: {//引入贵州省的地图
map: '贵州',
label: {
emphasis: {
show: false
}
},
roam: true,
zoom: 1,
itemStyle: {
normal: {
borderColor: '#387ba7',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 10
},
emphasis: {
areaColor: '#b3f3f3'
}
},
regions: [//对不同的区块进行着色
{
name: '毕节市',
itemStyle: {
normal: {
areaColor: '#2b97df'
}
}
}, {
name: '遵义市',
itemStyle: {
normal: {
areaColor: '#a9d6fd'
}
}
}, {
name: '铜仁市',
itemStyle: {
normal: {
areaColor: '#3497df'
}
}
}, {
name: '贵阳市',
itemStyle: {
normal: {
areaColor: '#0d4369'
}
}
}, {
name: '安顺市',
itemStyle: {
normal: {
areaColor: '#005c9b'
}
}
}, {
name: '黔西南布依族苗族自治州',
itemStyle: {
normal: {
areaColor: '#a9d6fd'
}
}
}, {
name: '六盘水市',
itemStyle: {
normal: {
areaColor: '#0d4369'
}
}
}, {
name: '黔东南苗族侗族自治州',
itemStyle: {
normal: {
areaColor: '#005c9b'
}
}
}, {
name: '黔南布依族苗族自治州',
itemStyle: {
normal: {
areaColor: '#2b97df'
}
}
}
]
}
};
myChart.setOption(option);
代码呢，大致如上，显示自定义图标的代码主要是这段，具体的参数大家可以去官网看文档
{
name: "冷链运输车分布",
type: 'custom',//配置显示方式为用户自定义
coordinateSystem: 'geo',
itemStyle: {
normal: {
color: '#46bee9'
}
},
renderItem: function (params, api) {//具体实现自定义图标的方法
return {
type: 'image',
style: {
image: "../../Content/images/汽车.png",
x: api.coord([
coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
.value[1]
])[0],
y: api.coord([
coldCar[params.dataIndex].value[0], coldCar[params.dataIndex]
.value[1]
])[1]
}
}
},
data: coldCar
}
显示自定义地图的代码是这块
geo: {//引入贵州省的地图
map: '贵州',
label: {
emphasis: {
show: false
}
},
roam: true,
zoom: 1,
itemStyle: {
normal: {
borderColor: '#387ba7',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 10
},
emphasis: {
areaColor: '#b3f3f3'
}
},
好了，大致的代码就这么多啦，希望能帮到大家
最后附上完整的代码文件： 网盘地址 密码：hnn9
