ECharts实现带钓鱼岛和南海诸岛的中国(China)地图

转载

[问题探讨]ECharts实现带钓鱼岛和南海诸岛的中国(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
    }

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3，增加位置信息见如下截图：

完整效果：

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-b6c3c6d139.css" rel="stylesheet">
                </div>
</article>
<div class="postTime"> 
    <div class="article-bar-bottom  ">
                    <span class="time">
            文章最后发布于: 2019-10-15 21:12:57            </span>
    </div>
</div>