ECharts如何自定义省、市、县区地图(各省市直辖区的map地图)，ECharts如何在地图上自定义图片、图标，根据经纬度显示自定义建筑图片、添加自定义覆盖物

前言

最近在做一个项目中，需求是：要显示中国某个省份下，某个市的地图，而地图还要有块级效果，自定义地图颜色，还要在地图上显示不同的建筑物图片，还要每隔几秒后（数据是从后端用ws实时推送过来的，要根据推送过来的数据，动态切换显示对应建筑物的相关信息）。

之前Echarts我也用得挺多的，但是没做过要在地图上显示自定义图片，因为echarts的地图用canvas渲染出来的，而且自定义的图片位置是要根据要求出显示，还要不间断来回切换显示。

刚开始有点懵，在网上一阵狂搜，然而结果并无卵用，都是参差不齐，最多显示一个小圆点之类的，更没什么实例代码。所以，那两天就有点头大，看Echarts官网也不知从那里看起。

最后，还是搞定了，相信在当你看到这篇文章之前，你和我之前的感受应该差不多，都有点头大吧！哈哈，开个玩笑哈！！

好吧，话就说到这里，先来看一下效果图：这里以贵州遵义为例！！

这是中国地图数据图形：

怎么样？

和你现在的项目需求差不多吗，哈哈，又浪了一下？现在来看看实现代码吧！

代码

HTML用来渲染地图用的，宽度和高度自己定义，我这里是以1440 * 916 为例。

<div id="map-box" style="width:1440px; height:916px"></div>

CSS用于在地图上自动切换时，显示建筑地址及相关信息的样式。

body{background:url(../img/body-bg.jpg) no-repeat;background-size:cover;}.map-box{border:1px solid #fff;}#map-box{margin:auto;}.map-hover-box{position:relative;margin-top:-160px;padding:12px 16px;min-width:200px;border-radius:20px 0 20px 0;background:rgba(11,21,50,.8);box-shadow:0 0 12px 1px #ec7d0f;word-wrap:break-word;}.map-hover-box::before{position:absolute;top:-1px;right:-1px;width:73px;height:38px;background:url(../img/map-href-rt.png) no-repeat;background-size:contain;content:"";}.map-hover-box::after{position:absolute;bottom:-1px;left:-1px;width:73px;height:38px;background:url(../img/map-href-lb.png) no-repeat;background-size:contain;content:"";}.map-hover-box h3{font-size:18px;}.map-hover-box p{padding-top:12px;font-size:16px;}.map-hover-box i{position:absolute;bottom:-108px;left:-75px;display:block;width:100px;height:108px;background:url(../img/map-href-zb.png) no-repeat;background-size:contain;}

JavaScript 引用文件

//echarts.min.js 这个就不用说了<script src="./js/echarts.min.js"></script>//zunyi.js 是指定让echarts显示的地图（这里是贵州省 遵义市 的地图数据）<script src="./js/zunyi.js"></script>//zunyi-data.js 是要在地图上显示的内容（建筑地址、名称、图片、经纬度等，这里一般是从后端传过来的，这里是演示用的哈！！）<script src="./js/zunyi-data.js"></script>zunyi-data.js 数据结构如下：const zunyiData = [{"adcode": "520321","people_count_": 942904,"lat": 27.535288,"lng": 106.831668,"name": "遵义县","level": "district","parent": "遵义市"},{"adcode": "520330","people_count_": 523180,"lat": 28.327826,"lng": 106.54,"name": "习水县","level": "district","parent": "遵义市"}];

这里面的数据结构你可以自己添加 或 删除，一般是从后端传过来的，由于是演示，所以我没有把建筑图片路径加在这里面（因为是本地图片，当然本地图片也可以加），而是直接在调用时添加进去的，具体请看下面JS代码中 注释//自定义图片的 路径下的JS代码 。

JavaScript实例代码

//自动切换定时器， 自动切换项目let timer = null, nows = -1;//初始Echarts实例对象const oMap = echarts.init(document.querySelector('#map-box'));//指定加载省、市、县、区 （注：这里是重点！！！，zunyi是zunyi.js中大数据变量，而用引号括起来的'zunyi'是要在map: 'zunyi',中加载的变量）echarts.registerMap('zunyi', zunyi);//（注：由于这里没有用模块化方式导入，所以把zunyi.json文件改为zunyi.js文件，并在里面用一个zunyi常量来引入的）//如果你当前环境支持模块化导入方式的话可以直接导入xxxx.json文件，就不用向上面改成js文件后用常量来引入//echarts.registerMap('zunyi', require('./js/zunyi.json'));//（注：想问zunyi.json文件是从哪里来的（或者 是想要其他省、市、县区等），请再向下看！！）//图片相关配置信息oMap.setOption({//标题文本配置title: {text: '中国 贵州省 遵义市 地理图形',textStyle: {color: 'white',fontStyle: 'normal',fontWeight: 'bold',fontSize: 32,lineHeight: 80,textBorderColor: 'green',textBorderWidth: 1,textShadowColor: 'green',textShadowBlur: 10,textShadowOffsetX: 2,textShadowOffsetY: 2}},//提示框组件(可以设置在多种地方) tooltip: {show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。trigger: 'item', //触发类型。item,axis,noneenterable: true,//鼠标是否可进入提示框浮层中，默认为false，showContent: true,//是否显示提示框浮层triggerOn: 'mousemove',//提示框触发的条件(mousemove|click|none) showDelay: 0,//浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。textStyle: {color: 'white',fontSize: 12},padding: [0, 8],hideDelay: 10, //浮层隐藏的延迟formatter: (o) => (o.data) ? `<section class="map-hover-box"><div class="map-hover-mov"><h3>建筑地址：${o.name}</h3></div><i></i></section>` : '',// backgroundColor: 'green', //提示框浮层的背景颜色。// borderColor: "white", //图形的描边颜色// borderWidth: 2,alwaysShowContent: true,transitionDuration: 1,//提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。},//地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。geo: {show: true,map: 'zunyi',roam: false,top: 90,left: 306,zoom: 1.02,aspectScale: 0.9,itemStyle: {normal: {opacity: 1, //图形透明度 0 - 1borderColor: "yellow", //图形的描边颜色borderWidth: 2,//描边线宽。为 0 时无描边。borderType: 'solid',//柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。areaColor: "yellow", //图形的颜色 #eee}}},//系列列表。每个系列通过 type(map, scatter, bar, line, gauge, tree.....) 决定自己的图表类型series: [{name: '贵州省遵义市',map: 'zunyi',type: "scatter",coordinateSystem: "geo",symbolSize: 0,silent: 'none',data: zunyiData.map(item => {return {name: item.name,value: [item.lng, item.lat]};})},{map: 'zunyi',type: "map",zoom: 1,//当前视角的缩放比例。aspectScale: 0.9, //这个参数用于 scale 地图的长宽比。geoBoundingRect.width / geoBoundingRect.height * aspectScaleroam: false, //是否开启鼠标缩放和平移漫游。默认不开启label: {show: false,textStyle: {color: "white",fontSize: 12,backgroundColor: '' //文字背景色}},itemStyle: {normal: {borderColor: "#00ff00",//图形的描边颜色borderWidth: 2, //描边线宽。为 0 时无描边。borderType: 'solid', //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。areaColor: "rgba(0, 186, 0, 0.8)", //图形的颜色 #eeeshadowBlur: 100, //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。shadowColor: '#002900',//阴影色shadowOffsetX: 20,//X轴阴影shadowOffsetY: -20, //Y轴阴影label: {show: true,textStyle: {color: "white",fontSize: 14}}},//鼠标移入时emphasis: {borderColor: "#005b89",borderWidth: "1",areaColor: "yellow",label: {show: false,textStyle: {color: "purple",fontSize: 14}}},effect: {show: true,shadowBlur: 10,loop: true},},//自定义图片数组对象[{}, {}...]}, ...zunyiData.map((item, index) => {return {type: "scatter",coordinateSystem: "geo",//自定义图片的 位置（lng, lat）data: [{ name: item.name, value: [item.lng, item.lat] }],//自定义图片的 大小symbolSize: [80, 60],//自定义图片的 路径symbol: `image://img/icon/icon (${index}).png`}})]});//自动切换const autoShow = (length) => {nows = (nows + 1) % length;oMap.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: nows});};//每隔5秒钟自动切换到下一个数据点autoShow(zunyiData.length);clearInterval(timer);timer = window.setInterval(() => {autoShow(zunyiData.length);}, 5000);// 点击事件oMap.on('click', function (res) {console.log(res);if('scatter' === ponentSubType){alert(`点击了 ${res.name} 图标`);}if('map' === ponentSubType){alert(`点击了 ${res.name} 地图`);}});

Demo地址

实例效果：

/Echarts-Map-Icon/Echarts-Map-Icon

代码地址：/MuGuiLin/Echarts-Map-Icon/MuGuiLin/Echarts-Map-Icon

你可能会问

1、echarts.min.js 从哪里可以下载？

<script src="/echarts/4.3.0-rc.2/echarts.min.js"></script>

在这里：

(1)、下载 - Apache EChartsEcharts官网下载

(2) 、/echarts公共静态资源库

2、zunyi.js 又从哪里可以下载？

<script src="./js/zunyi.js"></script>

注：根据你项目需求的不同，所有想要显示的Echarts地图json也不同，而且可以能是 整个中国的地图数据，也可能是某个省的，市的，县的，区的等，这时怎么办？

(1)、去网上搜也有很多的，但是可能数据不全，或者 需要积分才能下载

(2)、/ecomfe/awesome-echarts 去这里查找

(3)、DataV.GeoAtlas地理小工具系列去这里下载

在地图上点击选择需要的地图区域后，就可以在左下角下载当前对应区域的地图.json（geoJson）文件啦（里面还包括了其他的格式如svg等，根据自己的需求下载）！

扩展

1、地图拆分：

如果想把地图做一下拆分什么，可以这样做：当你把需要的地图数据.json下载下来以后，可以打开这个网址：/mapchaifen.html地图拆分，将你下载的地图.json文件拖到里面，可查看地图效果，折分地图区域、编辑等：

2、自定义地图区域：

一般下载的地图.json文件最详细就只到到县级 或 区级 的geo.json，如果就想要乡镇级别的，或者其他区域的数据，可以在当前地图.json的基础上，绘制自己想要的地图数据。

绘制自定义地图网站：http://geojson.io自定义地图区域

最后

最后想说，Echarts是百度出的一个很强大的商业级数据图表（数据可视化）库（ECharts 底层依赖ZRender）它提供商业产品常用图表库，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现等，

如果配合上D3.js、Three.js，Babylon.js等框架和库，还可以做出很3D之类的优秀，更酷炫的效果！比如：3D地球

当然类似的库还有兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts Highcharts让数据可视化更简单兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库！