echarts画精确到街道的地图

温和些吧

已于 2022-11-11 14:12:14 修改

阅读量2.2k

点赞数

分类专栏： js基础文章标签： echarts 前端 javascript

于 2022-11-11 13:50:16 首次发布

本文链接：https://blog.csdn.net/ilovewangjie990502/article/details/127804532

版权

本文介绍如何利用Echarts将地图精确到街道级别。首先从阿里云获取区级轮廓图的JSON文件，然后从北斗网站下载街道轮廓的KML文件。由于Echarts在解析某些类型时出错，需要在`parseGeoJson.js`中修改源码。为确保团队成员都能获取到修复后的代码，使用patch-package创建补丁，并将其添加到`postinstall`命令，这样每次安装依赖时都会应用补丁。

摘要由CSDN通过智能技术生成

最终效果图：
在这里插入图片描述

精确到区的可以先去获取区级的轮廓图：
阿里云

右侧有JSON文件，复制进项目即可。
需要精确到乡镇、街道，获取对应的街道轮廓KML：
北斗
目前没发现批量下载的方法，几个街道就下载几次，收集好下载的所有kml
目前准备工作做完了，需要拼接所有信息，获得最终JSON文件：
GeoJson

这里注意一下，目前这个站点不知道是不是地域屏蔽了，第一需要梯子，第二需要梯子选择美国站点才能顺利进去。
echarts引入JSON，但是区级JSON引入项目报错，目前版本是5.4.0，

Uncaught Error:Invalid geoJson format Cannot read property ‘length‘ of undefind

可以看出来是echarts自己本身解析的问题，没能解析出来“GeometryCollection”
需要在node_modules中把echarts文件改了，路径是

node_modules\echarts\lib\coord\geo\parseGeoJson.js

找到parseGeoJSON函数，直接无脑复制粘贴：

export default function parseGeoJSON(geoJson, nameProperty) {
   
  geoJson = decode(geoJson);
  return zrUtil.map(zrUtil.filter(geoJson.features, function (featureObj) {
   
    if (featureObj.geometry.geometries) {
   
        let geometry =