ECharts地图，ECharts自定义map地图，自定义座标、图标、icon

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_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) ? `<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 - 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);

 

Demo地址

---

demo地址：https://github.com/MuGuiLin/Echarts-Map-Icon Github

 

 

你可能会问

---

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

<script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts.min.js"></script>

在这里：

(1)、 https://www.echartsjs.com/zh/download.html Echarts官网下载

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

 

 

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

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

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

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

(2)、https://www.echartsjs.com/zh/download-map.html Echarts官网下载

(3)、http://datav.aliyun.com/tools/atlas 去这里下载

在地图上点击选择需要的地图区域后，就可以在左下角下载当前对应区域的地图.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还可以做出更优秀，更酷炫的效果！

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