useSwitchBaseLayer

简介

切换底图

使用示例

点我查看代码

<script lang="ts" setup>
import { getTianDiTuLayer, useSwitchBaseLayer } from '@summeruse/cesium'

import { Viewer } from 'cesium'
import { NSelect } from 'naive-ui'
import { shallowRef, watchEffect } from 'vue'

const div = document.createElement('div')
div.style.width = '100%'
div.style.height = '100%'

const iconContainer = document.createElement('div')
iconContainer.style.display = 'none'

const viewer = new Viewer(div, {
  baseLayer: false,
  shouldAnimate: true,
  infoBox: false,
  selectionIndicator: false,
  baseLayerPicker: false,
  timeline: false,
  animation: false,
  fullscreenButton: false,
  geocoder: false,
  homeButton: false,
  navigationHelpButton: false,
  sceneModePicker: false,
  scene3DOnly: true,
  creditContainer: iconContainer,
})

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,
})

const cesiumRef = shallowRef<HTMLElement>()

watchEffect(() => {
  if (cesiumRef.value) {
    cesiumRef.value.appendChild(div)
  }
})
</script>

<template>
  <NSelect v-model:value="visibleLayerName" :options />
  <div ref="cesiumRef" 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 }
}