如何加载地形源并添加到Mapbox地图w/React

Question

这是使用https://github.com/visgl/react-map-gl叉使用香草JS，您可以使用"加载"回调来添加源，然后设置地形。我可以使用React和useEffect复制这一点，但解决方案感觉不对。如何在React中正确地做到这一点？

Answer 1

首先，应将Source作为映射的子级返回：

{ Source } from "react-map-gl";

<Map ...>
<Source 
id="mapbox-raster-dem"
type="raster-dem"
url="mapbox://mapbox.mapbox-terrain-dem-v1"
tileSize="512"
maxzoom="14"/>
</Map>

现在您可以在地图组件中指定地形样式：

terrain={{
source: "mapbox-raster-dem",
exaggeration: 2,
}}

完整代码：

const MapInstance = () => {
return (
<Map
...
terrain={{
source: "mapbox-raster-dem",
exaggeration: 2,
}}
>
<Source
id="mapbox-raster-dem"
type="raster-dem"
url="mapbox://mapbox.mapbox-terrain-dem-v1"
tileSize="512"
maxzoom="14"
/>
</Map>
);
};