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

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map>
      <div style="position: absolute; top: 5px; left: 5px">
        <select v-model="layerIndex" placeholder="请选择">
          <option
            v-for="(item, index) in layerOptions"
            :key="item.layerTypes[0] + index"
            :label="item.label"
            :value="index"
          />
        </select>
      </div>
      <mb-tianditu-layer
        v-for="(item, index) in layerOptions"
        :key="item.layerTypes[0] + index"
        :types="item.layerTypes"
        :show="layerIndex === index"
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const layerOptions = [
  {
    label: '矢量底图(Vector)',
    layerTypes: ['vec'],
  },
  {
    label: '矢量底图+注记(Vector + Annotations)',
    layerTypes: ['vec', 'cva'],
  },
  {
    label: '影像底图(Imagery)',
    layerTypes: ['img'],
  },
  {
    label: '影像底图+注记(Imagery + Annotations)',
    layerTypes: ['img', 'cia'],
  },
  {
    label: '地形晕渲(Terrain)',
    layerTypes: ['ter'],
  },
  {
    label: '地形晕渲+注记(Terrain + Annotations)',
    layerTypes: ['ter', 'cta'],
  },
]
const layerIndex = ref(1)
</script>

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
created	Initialization complete event	-

SLOTS

Name	Description

METHODS

Name	Description	Definition