为什么mapbox拒绝我的geojson无效。

时间:2018-04-13 13:19:04

标签: json reactjs parsing mapbox geojson

我有一个函数,它将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]
        }
      }
    }]
}

1 个答案:

答案 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": {
            ...
        }
    });
});