WMS图层（WMSLayer）

示例

示例源码

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

const App = () => {
  const [mapCenter] = useState([-96.8005, 38.5111])
  const [zoom, setZoom] = useState(3)

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbWmsLayer
          url="https://ahocevar.com/geoserver/wms"
          layers="topp:states"
          version="1.3.0"
          extraParams="CRS=EPSG:3857&TILED=true"
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

名称	描述	类型	默认值
id	图层id	string	-
layers	图层名称	string	-
layerStyle	图层样式	string	-
tileSize	瓦片大小	number	256
height	图片高	number	256
width	图片宽	number	256
url	WMS server 地址	string	-
format	图片格式	string	image/png
maxzoom	最大缩放级别	number	22
minzoom	最小缩放级别	number	0
show	是否显示	boolean	true
subdomains	url中子域名	string / string[] / number[]	-
transparent	是否透明	boolean	true
version	版本	string	1.1.1
srs	坐标系	string	EPSG:3857
extraParams	url上添加的额外参数	string	-

EVENTS

名称	描述	参数
onCreated	地图初始化完成事件	-

METHODS

名称	描述	定义