我有一个函数,它将foursquare api提供的JSON解析为GeoJSON,然后我使用GeoJSON对象上的JSON.stringify()
将其提供给MapBox API,然后使用以下代码将其加载到地图
MapBox API返回说我的GeoJSON无效。
我检查了GeoJSON规范并且它完全匹配!
有人能发现错误吗?
加载功能
this.map.on("load", () => {
this.map.addSource("venues", {
type: "geojson",
data: geojson
});
以GeoJSON
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.31272484668867, 18.092948926236698]
},
"properties": {
"id": "4d0a6cc933d6b60c1c569a85",
"venueName": "Peciatkaren",
"address": "Kmetkova 32",
"distance": 20119,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.30957732182106, 18.087218856597]
},
"properties": {
"id": "4bd5ad37637ba5933bc3f670",
"venueName": "Zanzibar",
"address": "Štefánikova trieda 43",
"distance": 20030,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
}]
}
答案 0 :(得分:2)
您的GeoJSON没有任何问题,您可以通过多种方式使用它。
文档:
https://www.mapbox.com/mapbox-gl-js/api/#geojsonsource
https://www.mapbox.com/mapbox-gl-js/style-spec/#sources-geojson
以下一个例子:
var yourgeojson = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.31272484668867, 18.092948926236698]
},
"properties": {
"id": "4d0a6cc933d6b60c1c569a85",
"venueName": "Peciatkaren",
"address": "Kmetkova 32",
"distance": 20119,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [48.30957732182106, 18.087218856597]
},
"properties": {
"id": "4bd5ad37637ba5933bc3f670",
"venueName": "Zanzibar",
"address": "Štefánikova trieda 43",
"distance": 20030,
"icon": {
"iconUrl": "../assets/img/dot_PNG41.png",
"iconSize": [25, 25],
"iconAnchor": [0, 0]
}
}
}]
};
map.on('load', function () {
map.addSource('someid', {
type: 'geojson',
data: yourgeojson
});
map.addLayer({
"id": "points",
"type": "symbol",
"source": "someid",
"layout": {
...
}
});
});