有没有办法使用 react-map-gl 在地图上覆盖 png 和坐标

Question

我正在尝试在 react-map-gl 地图上显示 png 图像，类似于 here 的描述方式，但图像未按预期显示，并且没有错误可使用。

这里是代码

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>
     )

任何对此的见解将不胜感激

Answer 1

你需要一个图层。

类似的东西

<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/