echarts 使用geojson数据展示 GeometryCollection出错怎么办?
echarts4和echarts5都存在这个问题对比geojson数据发现,因为数据类型中有GeometryCollection存在。生成的地图里有一个区域为两块不连续的地图块,所以生成的geoJson中此区域的geometry.type===GeometryCollection解决方法修改源码node_modules\echarts\lib\coord\geo\parseGeoJson.js11
·
不敢休息,因为没有存款;不敢说累,因为没有成就;不敢偷懒,因为还要生活。一无所有就是我坚强,拼搏的唯一选择。
echarts4和echarts5都存在这个问题
对比geojson数据发现,因为数据类型中有GeometryCollection存在。生成的地图里有一个区域为两块不连续的地图块,所以生成的geoJson中此区域的geometry.type===GeometryCollection
解决方法
修改源码 node_modules\echarts\lib\coord\geo\parseGeoJson.js
116行
export default function parseGeoJSON(geoJson, nameProperty) {
geoJson = 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.length > 0;
}), function (featureObj) {
var properties = featureObj.properties;
var geo = featureObj.geometry;
var geometries = [];
if (geo.type === 'Polygon') {
var coordinates = geo.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') {
var coordinates = geo.coordinates;
zrUtil.each(coordinates, function (item) {
if (item[0]) {
geometries.push({
type: 'polygon',
exterior: item[0],
interiors: item.slice(1)
});
}
});
}
------------------------------------------新增的地方----------------------------
if (geometry.type === 'GeometryCollection') {
let geometry = {
type: "Polygon"
};
let coordinatesArr = featureObj.geometry.geometries.map(i => {
return i.coordinates;
});
geometry.coordinates = 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)
});
});
}
-------------------------------------------------------------------------------------------
var region = new GeoJSONRegion(properties[nameProperty || 'name'], geometries, properties.cp);
region.properties = properties;
return region;
});
}
由于显示的是街道级别的地图,geojson的数据是通过bigMap+geojson拼接的;
拼接方法参考某位网友的https://blog.csdn.net/weixin_43863505/article/details/112863357
好使~
::appale
更多推荐
已为社区贡献2条内容
所有评论(0)