有没有办法使用 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/

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

Is there a way to overlay a png and coordinates on a map using react-map-gl

typescript

reactjs

react-map-gl