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

在这里插入图片描述

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

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 { type, properties, geometry };
  }
  -------------------------------------------------------------------------------------------
    // Output of mapshaper may have geometry null
    return featureObj.geometry && featureObj.properties && featureObj.geometry.coordinates.length > 0;
  }), function (featureObj) {
    var properties = featureObj.properties;
    var geo = featureObj.geometry;
    var geometries = [];

    if (geo.type === 'Polygon') {
      var coordinates = geo.coordinates;
      geometries.push({
        type: 'polygon',
        // According to the GeoJSON specification.
        // First must be exterior, and the rest are all interior(holes).
        exterior: coordinates[0],
        interiors: coordinates.slice(1)
      });
    }

    if (geo.type === 'MultiPolygon') {
      var coordinates = geo.coordinates;
      zrUtil.each(coordinates, function (item) {
        if (item[0]) {
          geometries.push({
            type: 'polygon',
            exterior: item[0],
            interiors: item.slice(1)
          });
        }
      });
    }
  ------------------------------------------新增的地方----------------------------
    if (geometry.type === 'GeometryCollection') {
      let geometry = {
          type: "Polygon"
      };
      let coordinatesArr = featureObj.geometry.geometries.map(i => {
          return i.coordinates;
      });
      geometry.coordinates = coordinatesArr;
      coordinatesArr.forEach(i => {
          geometries.push({
              type: "polygon",
              // According to the GeoJSON specification.
              // First must be exterior, and the rest are all interior(holes).
              exterior: i[0],
              interiors: i.slice(1)
          });
      });
    }
      ------------------------------------------------------------------------------------------- 

    var region = new GeoJSONRegion(properties[nameProperty || 'name'], geometries, properties.cp);
    region.properties = properties;
    return region;
  });
}

由于显示的是街道级别的地图,geojson的数据是通过bigMap+geojson拼接的;
拼接方法参考某位网友的https://blog.csdn.net/weixin_43863505/article/details/112863357
好使~
::appale

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值