ECharts地图，echarts自定义map地图，echarts添加标注，自定义坐标、图标、icon

2024-07-16 11:45| 来源: 网络整理| 查看: 265

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

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

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

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

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

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

这是中国地图数据图形：

怎么样？

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

代码

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

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 这个就不用说了 //zunyi.js 是指定让echarts显示的地图（这里是贵州省遵义市的地图数据） //zunyi-data.js 是要在地图上显示的内容（建筑地址、名称、图片、经纬度等，这里一般是从后端传过来的，这里是演示用的哈！！） zunyi-data.js 数据结构如下： const zunyiData = [ { "adcode": "520321", "people_count_2010": 942904, "lat": 27.535288, "lng": 106.831668, "name": "遵义县", "level": "district", "parent": "遵义市" }, { "adcode": "520330", "people_count_2010": 523180, "lat": 28.327826, "lng": 106.200954, "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,none enterable: 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) ? `建筑地址：${o.name}` : '', // 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 - 1 borderColor: "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 * aspectScale roam: 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)", //图形的颜色 #eee shadowBlur: 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' === res.componentSubType){ alert(`点击了 ${res.name} 图标`); } if('map' === res.componentSubType){ alert(`点击了 ${res.name} 地图`); } });

Demo地址

实例效果：

https://demo.muguilin.com/Echarts-Map-Iconhttps://demo.muguilin.com/Echarts-Map-Icon

代码地址：https://github.com/MuGuiLin/Echarts-Map-Iconhttps://github.com/MuGuiLin/Echarts-Map-Icon

你可能会问

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

在这里：

(1)、下载 - Apache ECharts Echarts官网下载

(2) 、https://www.bootcdn.cn/echarts 公共静态资源库

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

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

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

(2)、https://github.com/ecomfe/awesome-echarts 去这里查找

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

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

扩展

1、地图拆分：

如果想把地图做一下拆分什么，可以这样做：当你把需要的地图数据.json下载下来以后，可以打开这个网址：http://www.dnccn.com/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 交互性图表库！

【本文地址】

公司简介

联系我们