map 的 react-map-gl 中心沒有改變

Question

我正在使用節點（16.17.0）和反應（17.0.1）。

問題是 react-map-gl(7.0.19)

緯度和經度變化很好，但是map不能移動到中心位置。

useEffect(()=>{
    setViewState({
        latitude:center?.lat,
        longitude:center?.lng,
        zoom: 18,
    })
},[center]);

<ReactMapGL
    initialViewState={viewState}
    onMove={onMove}
    onViewportChange={(viewport) => setViewState(viewport)}
    mapboxAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
    mapStyle="mapbox://styles/mapbox/streets-v11"
    width="100%"
    height="100%"
>
    <Source type={"geojson"} data={returnGeoData()} >
        <Layer type={"fill"} paint={{
            'fill-color': '#0080ff', // blue color fill
            'fill-opacity': 0.5
        }} />
        <Layer type={"line"} paint={{
            'line-color': '#0938d0',
            'line-width': 3
        }} />
    </Source>
    {/*{*/}
    {/*    !isEmpty(rotatedPoly?.geometry?.coordinates[0]?.slice(0,4)) &&*/}
    {/*    <Source  type="image" url={testImg} coordinates={rotatedPoly?.geometry?.coordinates[0]?.slice(0,4)}  >*/}
    {/*        <Layer source={"testItem"} type={"raster"} paint={{*/}
    {/*            "raster-fade-duration":0*/}
    {/*        }}/>*/}
    {/*    </Source>*/}
    {/*}*/}
</ReactMapGL>

map 不能 go 居中甚至更改“setViewState”是有原因的

Answer 1

對於 map 視圖根據您的中心值動態更新， ReactMapGl組件需要包含viewState屬性（緯度、經度、縮放）。 您可以通過添加{...viewState}來簡單地修復它，如下所示：

<ReactMapGL
    {...viewState}
    initialViewState={viewState}
    onMove={onMove}
    onViewportChange={(viewport) => setViewState(viewport)}
    mapboxAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
    mapStyle="mapbox://styles/mapbox/streets-v11"
    width="100%"
    height="100%"
>

此外，我建議為initialViewState使用 static 值而不是viewState 。