#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. Можете ли вы добавить подробную информацию об инициализации карты?