欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

解决echarts地图geoJson报错问题(“echarts.min.js:45 Uncaught Error: Invalid geoJson format Cannot read prope”)

程序员文章站 2022-06-26 17:14:21
背景项目中用echarts绘制地图,由于网上乡镇级别行政边界地图贼少,所以需要用到bigMap+geojson.io去绘制自定义地图,详情请看解决如何整理出乡镇级的地图json,以此使用echarts绘制出乡镇级的数据但是由于生成的地图里有一个区域为两块不连续的地图块,所以生成的geoJson中此区域的geometry.type===GeometryCollection.然而 echarts 中对于此类型没有做处理,详情见源码echarts\lib\coord\geo\parseGeoJson.js...

背景

项目中用echarts绘制地图,由于网上乡镇级别行政边界地图贼少,所以需要用到bigMap+geojson.io去绘制自定义地图,详情请看解决如何整理出乡镇级的地图json,以此使用echarts绘制出乡镇级的数据
但是由于生成的地图里有一个区域为两块不连续的地图块,所以生成的geoJson中此区域的geometry.type===GeometryCollection.
然而 echarts 中对于此类型没有做处理,详情见源码
echarts\lib\coord\geo\parseGeoJson.js
第133行左右
解决echarts地图geoJson报错问题(“echarts.min.js:45 Uncaught Error: Invalid geoJson format Cannot read prope”)
这段代码的意思是解析geoJson

解决方法

需要修改如下函数:
echarts 源代码 大约121行

function _default(geoJson, nameProperty) {}

直接复制粘贴:


function _default(geoJson, nameProperty) {
    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 &&
                featureObj.geometry.coordinates.length > 0
            );
        }),
        function(featureObj) {
            var properties = featureObj.properties;
            var geo = featureObj.geometry;
            var coordinates = geo.coordinates;
            var geometries = [];

            if (geo.type === "GeometryCollection") {
                let geometry = {
                    type: "Polygon"
                };
                let coordinatesArr = featureObj.geometry.geometries.map(i => {
                    return i.coordinates;
                });
                geometry.coordinates = coordinatesArr;
                console.log(coordinatesArr, "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)
                    });
                });
            }
            if (geo.type === "Polygon") {
                console.log("coordinatesPolygon", 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") {
                zrUtil.each(coordinates, function(item) {
                    if (item[0]) {
                        geometries.push({
                            type: "polygon",
                            exterior: item[0],
                            interiors: item.slice(1)
                        });
                    }
                });
            }
            console.log(
                properties[nameProperty || "name"],
                geometries,
                properties.cp,
                "asdfasdfasdf"
            );
            var region = new Region(
                properties[nameProperty || "name"],
                geometries,
                properties.cp
            );
            region.properties = properties;
            return region;
        }
    );
}

ps: 去git上看echarts之前的issues,有类似问题,修改前可以去该issues参观一下

本文地址:https://blog.csdn.net/xiaoyaoluntian/article/details/114268392

相关标签: echarts map