Echarts——Invalid geoJson format Cannot read property 'length' of undefined

前言

做一個地圖下鑽的echarts，發現點擊某幾個縣市的時候，報錯Invalid geoJson format Cannot read property 'length' of undefined，
對比數據發現出現報錯原因是因為數據類型中有GeometryCollection存在，但是echarts源碼中卻沒有對應的解析。

訪問官方的github倉庫果然有issues存在以及對應的解決方法,不過卻一直在pending中...
https://github.com/apache/echarts/issues/9350

地圖下鑽: https://github.com/wangyang0210/echartsMap

自己編譯后文件
https://github.com/wangyang0210/echarts-4.4.0

內容

修改方法

編輯echarts-4.4.0\src\coord\geo\parseGeoJson.js文件,直接復制下面的內容覆蓋同名方法;

/**
 * @alias module:echarts/coord/geo/parseGeoJson
 * @param {Object} geoJson
 * @return {module:zrender/container/Group}
 */
export default function (geoJson) {

    decode(geoJson);

    return zrUtil.map(zrUtil.filter(geoJson.features, function (featureObj) {
        // Output of mapshaper may have geometry null
        return featureObj.geometry
            && featureObj.properties
            && (
                // avoid length error if missing coordinates
                (featureObj.geometry.coordinates && featureObj.geometry.coordinates.length > 0)
                // allow GeometryCollection
                || (featureObj.geometry.geometries && featureObj.geometry.geometries.length > 0)
            )
            ;

    }), function (featureObj) {
        var properties = featureObj.properties;
        var geo = featureObj.geometry;

        var coordinates = geo.coordinates;

        var geometries = [];
        if (geo.type === 'Polygon') {
            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)
            });
        }
        else if (geo.type === 'MultiPolygon') {
            zrUtil.each(coordinates, function (item) {
                if (item[0]) {
                    geometries.push({
                        type: 'polygon',
                        exterior: item[0],
                        interiors: item.slice(1)
                    });
                }
            });
        }
        else if (geo.type === 'GeometryCollection') {
            var geometries2 = geo.geometries;
            zrUtil.each(geometries2, function (geo) { // OR      zrUtil.each(geometries2, function (geo) {
                var coordinates = geo.coordinates;
                if (geo.type === 'Polygon') { // this is a full copy from above
                    geometries.push({
                        type: 'polygon',
                        exterior: coordinates[0],
                        interiors: coordinates.slice(1)
                    });
                } // end full copy
            });
        }

        var region = new Region(
            properties.name,
            geometries,
            properties.cp
        );
        region.properties = properties;
        return region;
    });
}

編譯

# Install the dependencies from NPM:
npm install

# If intending to build and get all types of the "production" files:
npm run release
# The same as `node build/build.js --release`

# If only intending to get `dist/echarts.js`, which is usually
# enough in dev or running the tests:
npm run build
# The same as `node build/build.js`

# Get the same "production" files as `node build/build.js`, while
# watching the editing of the source code. Usually used in dev.
npm run watch
# The same as `node build/build.js -w`

# Check the manual:
npm run help
# The same as `node build/build.js --help`

驗證

將dist\echarts.min.js復制到項目中,進行驗證