我正在尝试在react-map-gl地图上显示png图像，类似于此处描述的方式，但是该图像未按预期显示，并且没有错误。
这是代码
const Map = (props: Props) => {
const [viewport, setViewPort] = useState<InteractiveMapProps>({
width: '100%',
height: 300,
latitude: 4.6500,
longitude: 97.5900,
zoom: 6
})
const onViewportChange = (viewport: InteractiveMapProps) => {
setViewPort(viewport)
}
return (
<MapGL
{...viewport}
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
onViewportChange={onViewportChange}
mapStyle={mapStyle}
>
<Source
id="map-source"
type="image"
url="https://image-"
coordinates={[
[95.23065877832998, 5.657816030165357],
[98.90221227671044, 5.657816030165357],
[98.90221227671044, 3.673126719208502],
[95.23065877832998, 3.673126719208502],
]}
/>
</MapGL>
)
任何对此的见解将不胜感激
您需要一个图层。
像这样
<Source
id="map-source"
type="image"
url="https://image-"
coordinates={[
[95.23065877832998, 5.657816030165357],
[98.90221227671044, 5.657816030165357],
[98.90221227671044, 3.673126719208502],
[95.23065877832998, 3.673126719208502]
]}
/>
<Layer
id="overlay"
source="map-source"
type="raster"
paint={{ "raster-opacity": 0.85 }}
/>
基于https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句