Я использую response-mapbox-gl для рендеринга карты. Я передаю данные о местоположении (props.places) динамически и обновляю карту, чтобы они отображались как объекты на карте.
const places = props.places
const _places = useMemo(() =>
places.map(({ ...otherProps }) => {
return <Feature key={otherProps._id} coordinates={otherProps.location.coordinates} />
}), [places])
Я также пытаюсь настроить границы, чтобы показать все места.
const [bbox, setBox] = useState(new mapboxgl.LngLatBounds())
useMemo(() => {
let coordinatesArray = []
places.forEach(element => { coordinatesArray.push(element.location.coordinates) })
const geoJsonFeatures = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {},
geometry: {
type: "Polygon",
coordinates: [coordinatesArray]
}
}]
}
let lngLatBox = turf.bbox(geoJsonFeatures)
let sw = [lngLatBox[0], lngLatBox[1]]
let ne = [lngLatBox[2], lngLatBox[3]]
let fitboundsObj = [sw, ne]
setBox(fitboundsObj)
}, [places])
Мой функциональный компонент возвращает следующее ...
return (
<Map
// style="mapbox://styles/mapbox/streets-v11"
style="mapbox://styles/kobstr/cj0itw9ku003l2smnu8wbz94o"
center={[mapOptions.lng, mapOptions.lat]}
// zoom={[mapOptions.zoom]}
pitch={[60]}
fitBounds={bbox}
interactive={false}
containerStyle={{
height: '100vh',
width: '100%'
}}
onMove={(_, event) => {
movingMap(event)
}}
>
<Layer type="circle" id="point" paint={{
"circle-radius": 5,
"circle-color": "#ff0000"
}}>
{_places}
</Layer>
</Map>
);
Проблема заключается в том, что в то время, как обновляются значения функций ({_places}) и BBox, карта не хочет чтобы приспособиться к новому BBox на Fitbounds, даже если он показывает новые функции.
Я также заметил, что когда я go возвращаюсь и перезагружаю страницу с новым набором мест, карта корректируя свои границы соответствующим образом. Это просто не происходит, когда пропускают новый набор мест и показывают новые функции.
Если бы у кого-то были какие-то идеи о том, что происходит, это было бы здорово. спасибо ..