VTreeLayer

VTreeLayer 组件用于根据树形结构的数据渲染服务。

基础用法

tree-layer.vue

<script lang="ts" setup>
import type { TreeNode } from '@movk-repo/mapbox'
import type { TreeInstance } from 'element-plus'
import { VCircleLayer, VGeoSource, VMapbox, VRasterLayer, VRasterSource, VTreeLayer, VUIControl, VWmsSource, VWmtsSource } from '@movk-repo/mapbox'
import { sleep } from '@movk-repo/shared'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const treeData = ref<TreeNode[]>([
  {
    label: 'OGC服务',
    children: [
      {
        label: 'WMTS',
        layerType: 'wmts',
        url: 'https://www.ign.es/wmts/ign-base',
        layer: 'IGNBase-gris',
        tileMatrixSet: 'GoogleMapsCompatible',
        format: 'image/jpeg',
      },
      {
        label: 'WMS',
        layerType: 'wms',
        url: 'https://ows.terrestris.de/osm/service',
        layers: 'OSM-WMS',
      },
    ],
  },
  {
    label: '矢量图层',
    children: [
      {
        label: 'CircleLayer',
        layerType: 'circle',
        data: '/mapbox/data/earthquakes.geojson',
        visible: true,
      },
    ],
  },
  {
    label: '栅格图层',
    children: [
      {
        label: 'RasterLayer',
        layerType: 'raster',
        tiles: () => {
          const subdomains = ['a', 'b', 'c']
          return subdomains.map(subdomain => `https://${subdomain}.tile.opentopomap.org/{z}/{x}/{y}.png`)
        },
      },
      {
        label: 'map-china400',
        layerType: 'raster',
        tiles: [`https://iserver.supermap.io/iserver/services/map-china400/wmts100?Service=WMTS&Request=GetTile&Version=1.0.0&LAYER=China&Format=image%2Fpng&TileMatrixSet=Custom_China&TileMatrix={z}&TileRow={y}&TileCol={x}`],
      },
    ],
  },
])

const treeRef = ref<TreeInstance>()

function handleCheckChange(node: TreeNode, checked: boolean) {
  node.if = true
  node.visible = checked
}

onMounted(() => {
  sleep(300).then(() => {
    treeRef.value?.setCheckedKeys(['WMTS', 'CircleLayer'])
  })
})
</script>

<template>
  <VMapbox :access-token="accessToken" :zoom="1">
    <VUIControl class="max-w-sm">
      <ElTree
        ref="treeRef" :data="treeData" show-checkbox default-expand-all node-key="label"
        @check-change="handleCheckChange"
      />
    </VUIControl>
    <VTreeLayer :tree-data="treeData">
      <template #wmts="{ node }">
        <VWmtsSource :url="node.url" :layer="node.layer" :tile-matrix-set="node.tileMatrixSet" :format="node.format">
          <VRasterLayer :visible="node.visible" />
        </VWmtsSource>
      </template>

      <template #wms="{ node }">
        <VWmsSource :url="node.url" :layers="node.layers">
          <VRasterLayer :visible="node.visible" />
        </VWmsSource>
      </template>

      <template #circle="{ node }">
        <VGeoSource :data="node.data">
          <VCircleLayer :visible="node.visible" />
        </VGeoSource>
      </template>

      <template #default="{ node }">
        <VRasterSource :tiles="node.tiles">
          <VRasterLayer :visible="node.visible" />
        </VRasterSource>
      </template>
    </VTreeLayer>
  </VMapbox>
</template>

隐藏源代码

API

treeLayerProps

属性名	说明	类型	默认值
treeData	树形结构数据	array	必填
typeKey	用于标识节点类型的属性名	string	layerType

treeLayerSlots

插槽名	说明	作用域参数
default	默认节点内容	object
[layerType]	特定类型节点的内容（如 raster）	object

类型定义

TreeNode

interface TreeNode {
  if?: boolean
  visible?: boolean
  layerType?: string
  children?: TreeNode[]
  [key: string]: any
}