ImageLayer

Image layer: This layer allows you to overlay an image (e.g., PNG, GIF) onto the map based on a target latitude/longitude range.

Example

Example Source Code

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbImageLayer, MbMap, MbTiandituLayer } from '@mapbox-react/core'

const App = () => {
  const [mapCenter] = useState([116.4228057861328, 39.93632920085673])
  const [zoom, setZoom] = useState(12)

  const [image, setImage] = useState({
    show: true,
    url: 'https://mapbox-web.github.io/mapbox-react/obj/windmill_2/windmill_diffuse.jpeg',
    coordinates: [
      [116.3594627380371, 39.93632920085673],
      [116.4228057861328, 39.93632920085673],
      [116.4228057861328, 39.89735776851477],
      [116.3594627380371, 39.89735776851477],
    ],
  })

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom} pitch={40}>
        <MbTiandituLayer types={['vec']} />
        <MbImageLayer url={image.url} coordinates={image.coordinates} />
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

API

PROPS

Name	Description	Type	Default
id	The ID of the layer	string	-
coordinates	An array of latitude/longitude coordinates representing the four corners of the image. The order is: top-left, top-right, bottom-right, bottom-left. Example: [[-80.425, 46.437], [-71.516, 46.437], [-71.516, 37.936], [-80.425, 37.936]]	Array<number[]>	-
url	The path to the image resource	string	-
show	Indicates whether the layer is visible	boolean	true

EVENTS

Name	Description	Parameters
onCreated	Map initialization completed event	-

METHODS

Name	Description	Definition