ECharts如何制作省份地图并在地图上显示自定义图标/散点图

之前一直被客户提的一个需求烦恼着，他要只显示某个省份的地图，并且呢要在地图上显示小车的图标，还有其它一些点的信息。我以前只用过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

ECharts如何制作省份地图并在地图上显示自定义图标/散点图相关推荐

利用 Echarts 简单制作省份或区域地图步骤
用 Echarts 无论是制作省份地图还是区县域地图,他们的步骤都是基本一样的. 下面本人就利用 Echarts 简单绘制省份地图的步骤与经验与各位分享一下. 1.准备工作 1.1 下载js静态文 ...
ECharts 在省份地图上定制自定义图标
ECharts 在省份地图上定制自定义图标原型上有个生态分布的板块,就像是每个国家想把国旗插到月球啊,北极,南极之类的,然后点击右侧的 lenged 能够打开关闭相应的部分.具体情况如下: 要想实现 ...
android百度地图单点定位_Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡...
一.问题描述上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡如图所示: 二. ...
Elasticsearch：使用反向地理编码在地图上显示自定义区域统计数据
在实际的许多应用中,我们可能并不一定按照行政区来进行划分区域,比如我们常说江浙一代,我们可以理解江苏和浙江这两个省合在一起,而不是把它们分开.我们有时也说长江三角区,它可能是跨几个省市的一个区域,而不 ...
使用echarts简单制作省份地图
引入echarts.min.js文件,http://echarts.baidu.com/download.html下载地址引入对应省份的js文件可以在http://echarts.baidu.co ...
vue百度地图、微信小程序marker自定义图标
先上vue-baidu-map的文档地址https://dafrok.github.io/vue-baidu-map/#/zh/index 百度地图设置marker图标的方式有使用url地址和本地图片 ...
安卓百度地图之定位图标在地图上显示
此文章接上一篇文件:安卓百度地图之定位_zpon_wangxuan的博客-CSDN博客,对于地图上显示定位图标就是在地图上添加一个地图的marker就可以了: 布局文件代码: <LinearLa ...
html 网页地图集制作ECHARTS,在页面使用echarts的地图（解决地图不完整）
测试环境:IDEA+Tomcat7 谷歌浏览器创建好web工程,编写jsp页面,在自己编写的JSP页面上导包现在echarts停止了在其网站上下载地图脚本,直接通过src引用网站上的china.j ...
echarts国内各省份地图js/json文件，全球地图js文件/汉化，字符云js文件
echarts国内各省份地图js/json文件,全球地图js文件/汉化,字符云js文件下载链接世界地图中国地图国内各省份地图字符云下载链接 https://github.com/FuHan ...

ECharts如何制作省份地图并在地图上显示自定义图标/散点图

ECharts如何制作省份地图并在地图上显示自定义图标/散点图相关推荐

最新文章

热门文章