天地图图层（TiandituLayer）

天地图图层，支持天地图图所有瓦片服务 无偏

• 矢量底图vec
• 矢量注记cva
• 影像底图img
• 影像注记cia
• 地形晕渲ter
• 地形注记cta

示例

示例源码

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

const App = () => {
  const [mapCenter] = useState([116.35, 39.91])
  const [zoom, setZoom] = useState(5)

  const layerOptions = [
    {
      label: '矢量底图',
      layerTypes: ['vec'],
    },
    {
      label: '矢量底图+注记',
      layerTypes: ['vec', 'cva'],
    },
    {
      label: '影像底图',
      layerTypes: ['img'],
    },
    {
      label: '影像底图+注记',
      layerTypes: ['img', 'cia'],
    },
    {
      label: '地形晕渲',
      layerTypes: ['ter'],
    },
    {
      label: '地形晕渲+注记',
      layerTypes: ['ter', 'cta'],
    },
  ]

  const [layerIndex, setLayerIndex] = useState(0)

  return (
    <div className="map-wrapper">
      <div className="action-bar">
        <select
          value={layerIndex}
          onChange={(e) => setLayerIndex(+e.target.value)}
        >
          {layerOptions.map((lo, index) => (
            <option key={lo.label} value={index}>
              {lo.label}
            </option>
          ))}
        </select>
      </div>
      <MbMap center={mapCenter} zoom={zoom}>
        {layerOptions.map((item, index) => (
          <MbTiandituLayer
            key={item.layerTypes[0] + index}
            types={item.layerTypes}
            show={layerIndex === index}
          />
        ))}
      </MbMap>
    </div>
  )
}

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

API

PROPS

名称	描述	类型	默认值
token	天地图服务token	string	-
id	图层id	string	-
maxzoom	最大缩放级别	number	22
minzoom	最小缩放级别	number	0
show	是否显示	boolean	true
types	矢量底图:'vec' 矢量注记:'cva' 影像底图:'img' 影像注记:'cia' 地形晕渲:'ter' 地形注记'cta'	string[]	["vec", "cva"]

EVENTS

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

METHODS

名称	描述	定义