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

简介: 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复制到项目中,进行验证

学无止境,谦卑而行.

目录
相关文章
|
7月前
|
JavaScript
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
541 0
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
|
7月前
ES6的Array.from({length:N})方法创建长度为N的undefined数组,等价于 [...Array(N)]
ES6的Array.from({length:N})方法创建长度为N的undefined数组,等价于 [...Array(N)]
|
数据可视化 定位技术 数据格式
Eccharts加载geojson环形GeometryCollection格式的解决方案:Cannot read property ‘length‘ of undefined
Eccharts加载geojson环形GeometryCollection格式的解决方案:Cannot read property ‘length‘ of undefined
221 0
|
6月前
|
前端开发 小程序 JavaScript
微信小程序-Unhandled promise rejection TypeError: Cannot read property ‘get‘ of undefined
微信小程序-Unhandled promise rejection TypeError: Cannot read property ‘get‘ of undefined
|
4月前
|
存储 JavaScript 前端开发
成功解决:Cannot read properties of undefined (reading ‘commit‘)
这篇文章提供了解决Vuex中"Cannot read properties of undefined (reading 'commit')"错误的两种方法:检查模板中的数据属性是否存在,以及确保在Vue实例中正确挂载了store对象。
成功解决:Cannot read properties of undefined (reading ‘commit‘)
|
4月前
|
JavaScript
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
76 0
|
4月前
|
前端开发 JavaScript
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
81 0
TypeError: Cannot set properties of undefined (setting ‘resdata‘),res定义数据出现的问题,定义的方法用this换成that
TypeError: Cannot set properties of undefined (setting ‘resdata‘),res定义数据出现的问题,定义的方法用this换成that
Cannot read properties of undefined (reading ‘row‘)
Cannot read properties of undefined (reading ‘row‘)
Cannot read properties of undefined (reading ‘post‘)
Cannot read properties of undefined (reading ‘post‘)

热门文章

最新文章