前言
做一个地图下钻的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.0srccoordgeoparseGeoJson.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`
验证
将distecharts.min.js
复制到项目中,进行验证