如何在 React js 中更改 mapbox-gl 的中心纬度和经度？

Question

我正在为 Mapbox 使用 Mapbox-gl 包。我在 useEffect 中渲染地图，我想做的是在不完全重新渲染地图的情况下更改 Mapbox 的中心。例如

const mapContainerRef = useRef(null);

const [markerLngLat, setMarkerLngLat] = useState([85.324, 27.7172]);

useEffect(() => {
  const map = new mapboxgl.Map({
    container: mapContainerRef.current,
    style: 'mapbox://styles/lmaps/ckl6t1boq578819qod5v7ynby',
    center: markerLngLat,
    zoom: 13,
  });
}, []);

return (
  <div>
    <a onClick={setMarkerLngLat([65.468754, 44.57875])} />
    <div className='listing-map-container' ref={mapContainerRef} />
  </div>
);

通过单击按钮，我想将地图的中心从之前的经纬度移动到新设置的经纬度，而无需重新渲染整个地图。在 useEffect 的 [] 中传递 markerLngLat 是可行的，但它会完全重新渲染地图和上面的所有其他 1000 个标记，所以不能更喜欢这种方式。实际代码要长得多，地图上标记了许多标记，所以我不想完全重新渲染地图。

Answer 1

每次设置新状态时，您都在重新创建 Mapbox 实例，请尝试使用 setCenter 或 flyTo 等方法直接创建实例，例如：

const mapRef = useRef();
const [mapObject, setMap] = useState();

useEffect(() => {
  const map = new mapboxgl.Map({
    container: mapContainerRef.current,
    style: 'mapbox://styles/lmaps/ckl6t1boq578819qod5v7ynby',
    center: markerLngLat,
    zoom: 13,
  });

  setMap(map);
},[]);

function setMapCenter(coords) {
  if (mapObject) {
    mapObject.setCenter(coords);
  }
}

return (
  <div>
    <a onClick={() => setMapCenter([65.468754, 44.57875])} />
    <div className='listing-map-container' ref={mapRef}></div>
  </div>
);

如何在 React js 中更改 mapbox-gl 的中心纬度和经度？

How to change center Latitude and Longitude of a mapbox-gl in react js?

javascript

mapbox

reactjs

mapbox-gl

mapbox-gl-js