useSwitchBaseLayer

简介

切换底图

使用示例

点我查看代码

<script lang="ts" setup>
import { createCesiumViewer, getTianDiTuLayer, useSwitchBaseLayer } from '@summeruse/cesium'
import { NSelect } from 'naive-ui'
import { shallowRef } from 'vue'

const container = shallowRef<HTMLDivElement>()
const { viewer } = createCesiumViewer(container)

const key = '8a684acb7b9d38ba08adf8035d0262ee'

const layers = {
  影像: [getTianDiTuLayer({
    type: 'img',
    key,
  }), getTianDiTuLayer({
    type: 'cia',
    key,
  })],
  矢量: [getTianDiTuLayer({
    type: 'vec',
    key,
  }), getTianDiTuLayer({
    type: 'cta',
    key,
  })],
  地形: [getTianDiTuLayer({
    type: 'ter',
    key,
  }), getTianDiTuLayer({
    type: 'cva',
    key,
  })],
}

const options = Object.keys(layers).map(key => ({
  value: key,
  label: key,
}))

const { visibleLayerName } = useSwitchBaseLayer({
  viewer,
  layers,
})
</script>

<template>
  <NSelect v-model:value="visibleLayerName" :options />
  <div ref="container" class="w-100% h-300px" />
</template>

源代码

点我查看代码

import type { ImageryLayer, Viewer } from 'cesium'
import { ref, watch } from 'vue'

export function useSwitchBaseLayer(data: {
  viewer: Viewer
  defaultLayerName?: string
  layers: {
    [key: string]: ImageryLayer[]
  }
}) {
  const visibleLayerName = ref(data.defaultLayerName || Object.keys(data.layers)[0])
  Object.values(data.layers).forEach((list) => {
    list.forEach((layer) => {
      data.viewer.imageryLayers.add(layer)
    })
  })

  watch(
    visibleLayerName,
    () => {
      Object.entries(data.layers).forEach(([name, list]) => {
        const visible = name === visibleLayerName.value
        list.forEach((layer) => {
          layer.show = visible
        })
      })
    },
    {
      immediate: true,
    },
  )

  return { visibleLayerName }
}