Solve the problem of echarts map geoJson error report ("echarts.min.js:45 Uncaught Error: Invalid geoJson format Cannot read prope")

background

In the project, echarts is used to draw maps. Since there are few thieves in the online township-level administrative boundary maps, bigMap+geojson.io is needed to draw custom maps. For details, please see How to sort out the township-level map json to draw using echarts Out of township level data.
However, because there is an area in the generated map that is two discontinuous map blocks, the geometry.type===GeometryCollection of this area in the generated geoJson.
However, echarts does not deal with this type. Details See the source code around line 133 of
echarts\lib\coord\geo\parseGeoJson.js This code means to parse geoJson

Insert picture description here

Solution

The following functions need to be modified:
About 121 lines of echarts source code

function _default(geoJson, nameProperty) {
    
    }

Copy and paste directly:


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: go git point of view issues before echarts, had a similar problem before the amendment can go to the issues visit them

Guess you like

Origin blog.csdn.net/xiaoyaoluntian/article/details/114268392