GeoJson导入Echarts（2D、3D模式），scatter、map、scatter3D、map3D等结合

最新推荐文章于 2025-03-07 16:16:24 发布

weixin_37914259

最新推荐文章于 2025-03-07 16:16:24 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/weixin_37914259/article/details/106480870

版权

本文介绍了如何获取并导入GeoJson数据到Echarts，强调了处理地图重合区域的方法，以及如何在Echarts中使用map3D和scatter3D实现交互效果。通过修改GeoJson数据格式解决鼠标悬浮问题，并讨论了Echarts的scatter3D在地图上的应用及其存在的鼠标触发问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、如何获取自定义geojson
打开网页http://geojson.io。获取所需json数据。可为数据添加所需要的属性键值对。获取初始数据在这里插入图片描述。

二、导入echarts
需要注册地图，Echarts.registerMap(‘苏州大学’, json数据)。
注意导入的geojson格式很重要，如果是无重合区域则不需要修改数据。如果地图中有重合部分，例如地图数据是苏州大学内有理学院，这种类型，如下图所示在这里插入图片描述

请修改大环为有孔洞的type类型，具体请参考geojson文档。并且要将大环的coordinates内的坐标数组顺序进行reverse操作。这样才能解决导入echarts时鼠标无法悬浮在小的区域上的问题。
可用于geo、geo3D、map、map3D、scatter、scatter3D等。在这里插入图片描述

三、以map3D为底，上层覆盖scatter3D。（这种做法主要解决的问题时鼠标可触发地图上的数据，也能触发散点图上的数据。如果只有散点图和geo3d，则地图上的数据是无法被鼠标选中的。）
首先scatter3D需要引入geo3D为坐标系统。此时如果散点图的数据只有一个的话，仍然鼠标无法点中此数据。这个是echarts的bug。
在这里插入图片描述
如有问题可加qq 3271147278