在这里插入图片描述

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

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐