echarts 使用geojson数据展示 GeometryCollection出错怎么办？

修复Echarts地图显示问题：GeometryCollection类型的处理

原创

已于 2022-04-13 09:17:44 修改 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #html5

于 2022-04-12 14:34:14 首次发布

本文档详细介绍了在使用Echarts4和Echarts5时遇到的由于GeoJSON数据中GeometryCollection类型导致地图区域显示为两块不连续的问题。作者提供了一个解决方案，即修改`parseGeoJson.js`源码，处理GeometryCollection类型，将它转化为多个Polygon。此外，还分享了如何通过bigMap和geojson拼接生成街道级别的地图，并给出了参考链接。

在这里插入图片描述

不敢休息，因为没有存款；不敢说累，因为没有成就；不敢偷懒，因为还要生活。一无所有就是我坚强，拼搏的唯一选择。

echarts4和echarts5都存在这个问题

对比geojson数据发现，因为数据类型中有GeometryCollection存在。生成的地图里有一个区域为两块不连续的地图块，所以生成的geoJson中此区域的geometry.type===GeometryCollection

解决方法

修改源码 node_modules\echarts\lib\coord\geo\parseGeoJson.js
116行

export default function parseGeoJSON(geoJson, nameProperty) {
  geoJson = decode(geoJson);
  return zrUtil.map(zrUtil.filter(geoJson.features, function (featureObj) {
  ------------------------------------------新增的地方----------------------------
    if (featureObj.geometry.geometries) {
      let geometry = featureObj.geometry.geometries.map(i => {
          return i.coordinates;
      });
      let { type, properties, ...params } = featureObj;
      return