天地图图层（TiandituLayer）

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

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

示例

示例源码

<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

名称	描述	类型	默认值
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

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

SLOTS

名称	描述

METHODS

名称	描述	定义