前言
做一个地图下钻的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
复制到项目中,进行验证
学无止境,谦卑而行.