Skip to content

雷达(RadarLayer)

示例

示例源码
tsx
import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbMap, MbWmtsLayer } from '@mapbox-react/core'
import { MbRadarLayer } from '@mapbox-react/effect-layers'

const App = () => {
  const [mapCenter] = useState([116, 39])
  const [zoom, setZoom] = useState(10)
  const [pitch, setPitch] = useState(0)
  const mapInst = useRef<any>()

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbWmtsLayer
          url="https://t{s}.tianditu.gov.cn/img_w/wmts?tk=b8ed92ff9b64aebcb0110acca15e478f"
          layerName="img"
          layerStyle="default"
          tileMatrixSetID="w"
          subdomains="01234567"
          maxzoom={18}
        />
        <MbRadarLayer coordinates={[116, 39]} radius={10000} />
      </MbMap>
    </div>
  )
}

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

API

PROPS

名称描述类型默认值
id图层Idstring-
coordinates中心坐标number[]-
radius半径number5000

EVENTS

名称描述参数

METHODS

名称描述定义