Question

我想填充一些坐标，我在下面的 mapbox 地图上从后端获得的是我从后端收到的示例 json

[
  {
    "model": "bike_parking_info.bikeparkinginfo",
    "pk": 13561,
    "fields": {
      "start_station_id": 3276,
      "start_station_name": "Marin Light Rail",
      "start_station_latitude": "40.71458403535893",
      "start_station_longitude": "-74.04281705617905",
      "end_station_id": 3256,
      "end_station_name": "Pier 40 - Hudson River Park",
      "end_station_latitude": "40.7277140777778",
      "end_station_longitude": "-74.01129573583603"
    }
  }
]

我有大约 1200 个对象要从带有坐标的后端加载我在循环下面迭代它

let result = []
        data.forEach(function (data1, index) {
            //console.log(data1['fields']);
            var jsonData={
               //  feature for Mapbox DC
                'type': 'Feature',
                'geometry': {
                  'type': 'Point',
                  'coordinates': [
                    Number(data1['fields']['start_station_longitude']),
                    Number(data1['fields']['start_station_latitude']),
                  ]
                },
                'properties': {
                  'title': data1['fields']['start_station_name']
                }
              }
              result.push(jsonData);


export const mapDetails = state => state.getInfo.features;

这就是我在 UI 上填充的方式

var map = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/light-v10',
      center: [-96, 37.8],
      zoom: 3
    });

    map.on('load', function () {
      // Add an image to use as a custom marker
      map.loadImage(
        'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
        function (error, image) {
          if (error) throw error;
          map.addImage('custom-marker', image);
          // Add a GeoJSON source with 2 points
          map.addSource('points', {
            'type': 'geojson',
            'data': {
              'type': 'FeatureCollection',
              'features': **mapDetails**
            }
          });

          // Add a symbol layer
          map.addLayer({
            'id': 'points',
            'type': 'symbol',
            'source': 'points',
            'layout': {
              'icon-image': 'custom-marker',
              // get the title name from the source's "title" property
              'text-field': ['get', 'title'],
              'text-font': [
                'Open Sans Semibold',
                'Arial Unicode MS Bold'
              ],
              'text-offset': [0, 1.25],
              'text-anchor': 'top'
            }
          });
        }
      );
    });

但我不断收到以下错误

 "Input data given to 'points' is not a valid GeoJSON object."

请帮我看看这里出了什么问题？

Answer 1

我有错，我不得不使用 useSelector 将数据检索回我的 UI，因此必须进行以下更改

convert_to_str

给“点”的输入数据不是有效的 GeoJSON 对象

1 个答案: