TiandituLayer

Tianditu Layer, supporting all Tianditu tile services (unbiased).

• Vector Base Map (vec)
• Vector Annotations (cva)
• Imagery Base Map (img)
• Imagery Annotations (cia)
• Terrain Shading (ter)
• Terrain Annotations (cta)

Example

Example Source Code

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

Name	Description	Type	Default
token	Tianditu service token (API key). This is required to access Tianditu services. You can obtain a token from the Tianditu official website.	string	-
id	Layer ID. A unique identifier for the layer.	string	-
maxzoom	Maximum zoom level. The highest zoom level at which tiles are available. This corresponds to the highest resolution.	number	22
minzoom	Minimum zoom level. The lowest zoom level at which tiles are available. This corresponds to the lowest resolution.	number	0
show	Visibility of the layer. If true, the layer is displayed; if false, the layer is hidden.	boolean	true
types	Types of TianDiTu layers to include. Possible values are: 'vec' (Vector Base Map), 'cva' (Vector Annotations), 'img' (Imagery Base Map), 'cia' (Imagery Annotations), 'ter' (Terrain Shading), and 'cta' (Terrain Annotations). This property accepts an array of strings, allowing for multiple layer types to be combined.	string[]	["vec", "cva"]

EVENTS

Name	Description	Parameters
onCreated	Initialization complete event	-

METHODS

Name	Description	Definition