react-map-gl地图中心无法随viewState更新问题咨询

核心问题 #

你代码里的ReactMapGL组件用了initialViewState属性，这个属性只在组件首次渲染时生效，后续哪怕通过setViewState更新了viewState的值，地图也不会跟着更新中心位置——因为initialViewState不会监听状态变化，它仅用来设置初始地图视角。

解决方法 #

把initialViewState={viewState}替换成viewState={viewState}，这样当viewState里的经纬度变化时，地图会自动响应并更新到对应中心位置：

<ReactMapGL
    viewState={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>

额外验证点 #

• 确认center对象的lat和lng是有效的数字类型，避免传入字符串或undefined
• 检查useEffect的依赖数组[center]是否正确，确保center变化时能触发setViewState执行

内容的提问来源于stack exchange，提问作者Alex Choi