解决echarts地图geoJson报错问题（Invalid geoJson format Cannot read prope）改源码就太蠢了

最新推荐文章于 2024-07-10 16:35:29 发布

m0_61346324

最新推荐文章于 2024-07-10 16:35:29 发布

阅读量1k

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/m0_61346324/article/details/130061045

版权

文章讲述了在处理GeoJSON数据时遇到Echarts不支持GeometryCollection类型的问题，解决方案是使用turf库将这类数据转换为Echarts可识别的MultiPolygon类型。通过`toSplit`和`transFormGeoJson`函数实现数据转换，确保地图渲染正常。

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

报错是因为你的geoJson数据有echarts不认识的类型，比如GeometryCollection，

那么通过turf将它转换为echarts认识的类型不就好了

import * as echarts from 'echarts'
import * as turf from "@turf/turf";

let yishuixian = require('../../../public/json/yishuixian.json')

export const znMap = {
  yishuixian: "沂水县"
};

export function registerMap(mapName, geoJson) {
  if (mapName && geoJson) {
    let map = eval(geoJson);
    map = toSplit(map);
    if (Object.keys(znMap).includes(geoJson)) {
      echarts.registerMap(mapName, map);
    } else {
      echarts.registerMap(mapName, yishuixian)
    }
  }
}

function toSplit(map) {
  let tempArr = map.features.map(i => {
    if (i.geometry.type != "GeometryCollection") {
      return i;
    } else {
      return transFormGeoJson(i);
    }
  })
  return turf.featureCollection(tempArr);;
}

function transFormGeoJson(map) {
  // 将GeometryCollection类型转换为MultiPolygon类型
  const multiPolygon = turf.multiPolygon(
    map.geometry.geometries.map((geometry) => {
      return geometry.coordinates;
    })
  );
  multiPolygon.properties = map.properties;
  return multiPolygon;
}