echarts
echarts copied to clipboard
geojson GeometryCollection doesn't work
One-line summary [问题简述]
GeometryCollection is a type of feature that should be accepted in the geojson format. But in echarts it creates an error:
Invalid geoJson format Cannot read property 'length' of undefined
Version & Environment [版本及环境]
- ECharts version [ECharts 版本]: 4.1.0
- Browser version [浏览器类型和版本]: latest chrome
- OS Version [操作系统类型和版本]: windows7
Expected behaviour [期望结果]
ECharts option [ECharts配置项]
var geojson = {"type": "FeatureCollection", "features": [
{"type":"Feature"
,"geometry":{"type":"GeometryCollection","geometries":[{"type":"Polygon","coordinates":[[[2.869507,50.759922],[2.870591,50.754608],[2.878625,50.754902],[2.876114,50.761196],[2.869507,50.759922]]]},{"type":"Polygon","coordinates":[[[2.878653,50.761589],[2.885288,50.757088],[2.888319,50.753296],[2.894505,50.752754],[2.921918,50.757103],[2.917394,50.762345],[2.918786,50.763947],[2.900534,50.767029],[2.878653,50.761589]]]}]}
,"properties":{"name":"Mesen#Messines","province":"BE-VWV","region":"BE-VLG","shn":"BE233016"}}
]}
echarts.registerMap('mymap', geojson, {});
option = {
series: [
{
type: 'map',
map: 'mymap'
}
]
};
Other comments [其他信息]
Here is some map that works ok with the code provided above
/// THIS WORKS OK -----------------
var geojson = {"type": "FeatureCollection", "features": [
{"type":"Feature"
,"geometry":{"type":"MultiPolygon","coordinates":[[[[4.284636,50.845249],[4.283894,50.840671],[4.282112,50.839588],[4.283052,50.837979],[4.27318,50.838742],[4.271828,50.836262],[4.256418,50.834908],[4.254548,50.833454],[4.255798,50.829731],[4.253017,50.825131],[4.244673,50.819466],[4.245567,50.817627],[4.247497,50.817345],[4.247203,50.819023],[4.250306,50.81942],[4.251937,50.8172],[4.256503,50.817295],[4.259908,50.811089],[4.272742,50.812222],[4.275658,50.810955],[4.276961,50.80838],[4.283621,50.807079],[4.294198,50.808224],[4.297497,50.809529],[4.300175,50.812828],[4.306363,50.812462],[4.31035,50.813526],[4.308171,50.817326],[4.320585,50.824517],[4.326115,50.830658],[4.330737,50.833145],[4.336169,50.838948],[4.340331,50.840168],[4.337955,50.846577],[4.335884,50.846344],[4.335525,50.848233],[4.331875,50.845337],[4.328122,50.844181],[4.310281,50.850212],[4.300801,50.848477],[4.299858,50.849091],[4.299589,50.847309],[4.293651,50.84737],[4.293705,50.849438],[4.290843,50.848881],[4.293026,50.845303],[4.284636,50.845249]]]]}
,"properties":{"name":"Anderlecht","province":null,"region":"BE-BRU","shn":"BE421001"}},
{"type":"Feature"
,"geometry":{"type":"MultiPolygon","coordinates":[[[[4.368067,50.814831],[4.36956,50.809456],[4.373297,50.807999],[4.371566,50.806748],[4.373802,50.802075],[4.377972,50.800278],[4.375344,50.799736],[4.400834,50.796246],[4.401355,50.797299],[4.397019,50.801514],[4.393895,50.800644],[4.387366,50.805691],[4.382692,50.815853],[4.379204,50.81393],[4.370347,50.823975],[4.367167,50.82531],[4.365174,50.828987],[4.366397,50.829392],[4.360407,50.831513],[4.356352,50.834809],[4.363002,50.838696],[4.368684,50.840016],[4.372166,50.839298],[4.372835,50.840641],[4.37592,50.839657],[4.3757,50.835861],[4.379568,50.836762],[4.380182,50.840092],[4.393291,50.838017],[4.396082,50.843384],[4.392798,50.847317],[4.384265,50.851464],[4.378971,50.849022],[4.369441,50.846943],[4.368544,50.852513],[4.35531,50.85624],[4.35725,50.860478],[4.361058,50.868801],[4.365224,50.870869],[4.365127,50.869446],[4.372499,50.871552],[4.374539,50.875241],[4.384005,50.880604],[4.388482,50.881019],[4.38723,50.882023],[4.401978,50.885949],[4.407316,50.882207],[4.410755,50.876476],[4.41415,50.878269],[4.426031,50.871754],[4.428548,50.876389],[4.427257,50.877468],[4.437052,50.878781],[4.427008,50.890587],[4.432978,50.894573],[4.425915,50.898506],[4.427634,50.899666],[4.424175,50.902672],[4.417316,50.905064],[4.415738,50.90617],[4.412034,50.907151],[4.414501,50.911381],[4.403377,50.913044],[4.398876,50.913121],[4.394525,50.910615],[4.388369,50.910607],[4.383592,50.902069],[4.378084,50.899376],[4.377383,50.897072],[4.360628,50.9012],[4.342285,50.902443],[4.330909,50.900917],[4.319067,50.894806],[4.313876,50.89336],[4.327857,50.89333],[4.326109,50.891209],[4.329992,50.890541],[4.327463,50.888832],[4.329996,50.885235],[4.337109,50.886925],[4.339254,50.881947],[4.338407,50.876454],[4.340636,50.871292],[4.343535,50.867546],[4.341851,50.864949],[4.3485,50.862801],[4.345731,50.859597],[4.346771,50.859089],[4.337286,50.848503],[4.335525,50.848233],[4.335884,50.846344],[4.337955,50.846577],[4.340331,50.840168],[4.342879,50.833096],[4.349088,50.833023],[4.355223,50.835522],[4.358362,50.830601],[4.365587,50.823441],[4.36512,50.823105],[4.369656,50.819264],[4.370624,50.815274],[4.368067,50.814831]]]]}
,"properties":{"name":"Brussel#Bruxelles","province":null,"region":"BE-BRU","shn":"BE421004"}},
{"type":"Feature"
,"geometry":{"type":"MultiPolygon","coordinates":[[[[4.407609,50.838806],[4.401194,50.840481],[4.399988,50.843663],[4.398926,50.844696],[4.396082,50.843384],[4.393291,50.838017],[4.380182,50.840092],[4.379568,50.836762],[4.379021,50.834023],[4.382325,50.832897],[4.380077,50.830136],[4.389457,50.822422],[4.396076,50.825665],[4.399307,50.824871],[4.404279,50.826992],[4.412213,50.830429],[4.410352,50.830929],[4.409977,50.833676],[4.405246,50.837563],[4.407609,50.838806]]]]}
,"properties":{"name":"Etterbeek","province":null,"region":"BE-BRU","shn":"BE421005"}},
{"type":"Feature"
,"geometry":{"type":"MultiPolygon","coordinates":[[[[4.411718,50.852108],[4.422057,50.856838],[4.426555,50.863045],[4.420596,50.86779],[4.426031,50.871754],[4.41415,50.878269],[4.410755,50.876476],[4.407316,50.882207],[4.401978,50.885949],[4.38723,50.882023],[4.388482,50.881019],[4.396267,50.868309],[4.404229,50.860089],[4.413018,50.854042],[4.410795,50.85297],[4.411718,50.852108]]]]}
,"properties":{"name":"Evere","province":null,"region":"BE-BRU","shn":"BE421006"}},
{"type":"Feature"
,"geometry":{"type":"MultiPolygon","coordinates":[[[[4.298228,50.882107],[4.298883,50.880062],[4.292475,50.874832],[4.304332,50.869187],[4.309935,50.869141],[4.314291,50.867142],[4.326196,50.865582],[4.32498,50.866768],[4.320606,50.872189],[4.323383,50.872715],[4.320454,50.875195],[4.32108,50.877678],[4.319401,50.878407],[4.319451,50.8802],[4.298228,50.882107]]]]}
,"properties":{"name":"Ganshoren","province":null,"region":"BE-BRU","shn":"BE421008"}},
{"type":"Feature"
,"geometry":{"type":"MultiPolygon","coordinates":[[[[4.30095,50.890507],[4.293991,50.888496],[4.295424,50.885628],[4.298228,50.882107],[4.319451,50.8802],[4.319401,50.878407],[4.32108,50.877678],[4.320454,50.875195],[4.323383,50.872715],[4.320606,50.872189],[4.32498,50.866768],[4.329836,50.867504],[4.332376,50.864559],[4.340636,50.871292],[4.338407,50.876454],[4.339254,50.881947],[4.337109,50.886925],[4.329996,50.885235],[4.327463,50.888832],[4.329992,50.890541],[4.326109,50.891209],[4.327857,50.89333],[4.313876,50.89336],[4.30095,50.890507]]]]}
,"properties":{"name":"Jette","province":null,"region":"BE-BRU","shn":"BE421010"}},
{"type":"Feature"
,"geometry":{"type":"MultiPolygon","coordinates":[[[[4.307331,50.864231],[4.310737,50.864556],[4.316261,50.861233],[4.322304,50.862515],[4.327029,50.861084],[4.325794,50.856915],[4.328152,50.856724],[4.337787,50.859436],[4.332376,50.864559],[4.329836,50.867504],[4.32498,50.866768],[4.326196,50.865582],[4.314291,50.867142],[4.307177,50.865692],[4.307331,50.864231]]]]}
,"properties":{"name":"Koekelberg","province":null,"region":"BE-BRU","shn":"BE421011"}}
]}
I'm working on a fix, I will try a pull request.
EDIT:
I got the fix working : https://github.com/mathiasleroy/incubator-echarts/commit/01fcf44d17ee5b8e5524d2136a3f23704b6460f3
@mathiasleroy Please make a pull request to us and @pissang will have a further look. Thanks for your contribution!
@Ovilia I made a pull request (This is my first time, please let me know if what I did is ok)
https://github.com/apache/incubator-echarts/pull/9386
Sure, thanks! @pissang will review the code later.
Does geojson support polyline?
@Ovilia @mathiasleroy the geojson data still not works, is there any things new about this pr on this issues.( it failed to merge the pr -.-). any plan about this ?
### not works
{"type":"GeometryCollection","geometries":[]}
###
{
"type":"FeatureCollection",
"features":[{
"type":"Feature",
"properties":{},
"geometry":{
"type":"GeometryCollection",
"geometries":[]
}
}]
}
@Leesson polyline support has been added in 5.3
@diveDylan GeometryCollection is not supported because it misses information like name
from properties.
5.3.0里这个还是不行,为啥没修复
Has version 5.3.0 been repaired?
5.3.0里这个还是不行,为啥没修复
fixed: Uncaught Error:Invalid geoJson format Cannot read property ‘length‘ of undefind
// node_modules/echarts/lib/coord/geo/parseGeoJson.js
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 = [];
switch (geo.type) {
case 'Polygon':
var coordinates = geo.coordinates; // According to the GeoJSON specification.
// First must be exterior, and the rest are all interior(holes).
geometries.push(new GeoJSONPolygonGeometry(coordinates[0], coordinates.slice(1)));
break;
case 'MultiPolygon':
zrUtil.each(geo.coordinates, function (item) {
if (item[0]) {
geometries.push(new GeoJSONPolygonGeometry(item[0], item.slice(1)));
}
});
break;
case 'LineString':
geometries.push(new GeoJSONLineStringGeometry([geo.coordinates]));
break;
case 'MultiLineString':
geometries.push(new GeoJSONLineStringGeometry(geo.coordinates));
case '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",
exterior: i[0],
interiors: i.slice(1)
});
});
break;
}
}
var region = new GeoJSONRegion(properties[nameProperty || 'name'], geometries, properties.cp);
region.properties = properties;
return region;
});
}
Does It fixed? echarts version:5.3.3
Does It fixed? echarts version:5.3.3
兄弟,我之前是直接改的本地的echarts代码然后再打包的,你可以试试。