[问题探讨]ECharts实现带钓鱼岛和南海诸岛的中国(China)地图

最新推荐文章于 2024-01-25 18:14:23 发布

tom_wong666

最新推荐文章于 2024-01-25 18:14:23 发布

阅读量5.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：问题探讨文章标签： js echarts map 钓鱼岛 china

本文链接：https://blog.csdn.net/tom_wong666/article/details/102536981

本文详细介绍了在VUE项目中，如何使用ECharts来绘制符合测绘局要求的中国全图，即展示钓鱼岛和南海诸岛。通过修改ECharts内置的`china.js`地图文件，增加钓鱼岛的位置信息，实现了在地图加载时即显示这些重要岛屿的效果。

问题：实现带钓鱼岛和南海诸岛的中国(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@@@@@@@