[問題探討]ECharts實現帶釣魚島和南海諸島的中國(China)地圖

問題:實現帶釣魚島和南海諸島的中國(China)地圖

環境:VUE+ ECharts

重點闡述:

1,在VUE安裝ECharts後,在如下目錄就有地圖js/json可以使用
node_modules—echarts—map—js
node_modules—echarts—map—json
2,調用node_modules—echarts—map—js下的china.js繪製中國地圖打開後就有南海諸島,但是默認未展示釣魚島信息,需要點擊臺灣地圖才能展示,這和目前測繪局要求‘中國全圖必須表示南海諸島、釣魚島等重要島嶼’的要求相沖突,本文主要說明如何處理這個問題
3,本文只闡述釣魚島問題,具體ECharts的map配置,請參考如下ECharts官網配置項手冊
https://www.echartsjs.com/zh/option.html#series-map

中國全圖展示釣魚島的方法:

1,對如下文件做修改,並使用如下文件渲染中國地圖
node_modules—echarts—map—js—china.js
2,在文件echarts.registerMap(‘china’…這個方法的最後增加如下釣魚島信息

{
    "id": "830000",
    "geometry": {
      "type": "Polygon",
      "coordinates": ["@@@@B@@@@@@@B@@@B@@@@@@@BA@@@@B@@@@@@@BA@@@@B@@@@@B@@@@@B@@@@@@@B@@@B@@@@@B@@@@@@@BA@@@@B@@A@@B@@@@A@@B@@@@@B@@A@@@@BA@@@@B@@A@@@A@@A@@A@@A@@@@@A@@A@@A@@@@@@@A@@@@@A@@@@@A@@@@@@@A@@@@@@@A@@@@@A@@@@@A@@@@@@@A@@@@@A@@@@@@@@@A@@@@@A@@@@@@B@@@@AA@@@@A@@@@B@AA@@@@@AA@@@A@BA@@@@A@@A@BAA@@B@@A@@@@@@@@@A@@A@@@@A@@AA@@@@@A@@@@AA@@@@@A@@@A@@@@A@@A@@@@@A@@@@@A@@@@@@@@@A@@@@@A@@@@@@@A@@@@B@@@@@BA@@@@@@@@B@@@@@BA@@@@@@B@@B@@B@@@@@B@@@@B@@@@B@@@@@B@@B@@B@@@@B@@@@BB@@@BB@@@@B@@B@@B@@@BB@@@@B@@@@@B@@@@BB@@@@@B@@@@B@A@B@@B@@@@@B@@@@@B@@B@@@@B@@A@@BB@@"],
      "encodeOffsets": [
        [126439, 26370]
      ]
    },
    "properties": {
      "cp": [123.476492, 25.744676],
      "name": "釣魚島",
      "childNum": 1
    }

3,增加位置信息見如下截圖:

完整效果:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章