Ошибка типа: globalMap.removeLayer не является функцией

#javascript #reactjs #maps #mapbox #mapbox-gl-js

Вопрос:

Я пытаюсь удалить слой из приложения карты; однако я продолжаю получать ошибку, которая removeLayer не является функцией, несмотря на то, что она указана в API MapboxGL.

Предположительно, я пытаюсь расширить globalMap с карты. Я смог добавить строки с помощью globalMap.addSource и globalMap.addLayer , но при попытке удалить их я получаю эту ошибку: TypeError: globalMap.removeLayer is not a function .

Я импортирую MapboxGL.

 import mapboxgl from 'mapbox-gl';
 
 const [globalMap, setMap] = useState(Object());
setMap(map);
 

Позже в коде,

 React.useEffect(() => {
    console.log("Good morning line 235!");
    console.log(props);
    console.log("Good morning line 237!");

    if(props.show /* amp;amp; onlyRunOnce == 0 */) {

      console.log("Good morning line 240!");
      console.log(props);
      var northEast = [131.308594, 46.195042];
      var southEast = [117.597656, 8.233237];
      var southWest = [79.101563, 32.842674];
      var northWest = [86.847656, 44.715514];

      // Add bounding box to the map

      globalMap.addSource('newroute', {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'properties': {},
            'geometry': {
                'type': 'LineString',
                'coordinates': [
                    northEast, southEast, southWest, northWest, northEast
                ]
            }
        }
      });

      // Draws bounding box
      globalMap.addLayer({
        'id': 'newroute',
        'type': 'line',
        'source': 'newroute',
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': '#ff0000',
            'line-width': 5
        }
      });
    }
    else {
      globalMap.removeLayer('newroute');
      globalMap.removeSource('newroute');
    }
  });
 

Комментарии:

1. setMap(map) <- Я не вижу, чтобы вы объявляли map в своем коде.

2. @HoangLe извините, я забыл включить его… он объявлен ранее в моем коде

3. так что, я думаю, вы это перепроверите. И к вашему сведению, если вы хотите обновить globalMap с помощью useState(), globalMap.addSource(...) это не лучший способ сделать это. setMap({**updates go here**}) следует использовать. Проверьте этот документ для получения более подробной информации о реактивных крючках . Если вы все еще застряли, пожалуйста, предоставьте более подробный код. Овации

4. Можете ли вы добавить подробную информацию об инициализации карты?