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 交互性圖表庫！

ECharts地圖，ECharts自定義map地圖，自定義座標、圖標、icon

ECharts如何自定義省、市、縣區地圖(各省市直轄區的map地圖)，ECharts如何在地圖上自定義圖片、圖標，根據經緯度顯示自定義建築圖片、添加自定義覆蓋物

前言

代碼

JavaScript實例代碼

Demo地址

你可能會問

擴展

最後

號稱能打敗MLP的KAN到底行不行？數學核心原理全面解析

同事使用 insert into select 遷移數據，開開心心上線，上線後被公司開除！

DeepFilterNet復現

JS深拷貝、淺拷貝和使用場景詳解

ECharts地圖，ECharts自定義map地圖，自定義座標、圖標、icon

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結