图层

添加天地图

getTianDiTuLayer

点我查看代码

<script lang="ts" setup>
import { Viewer } from 'cesium'
import { shallowRef, watchEffect } from 'vue'
import { getTianDiTuLayer } from '.'

const viewer = shallowRef<Viewer>()

const cesiumRef = shallowRef<HTMLElement>()

watchEffect(() => {
  if (cesiumRef.value) {
    viewer.value = new Viewer(cesiumRef.value, {
      baseLayer: false,
      imageryProviderViewModels: undefined,
      shouldAnimate: true,
      infoBox: false,
      selectionIndicator: false,
      baseLayerPicker: false,
      timeline: false,
      animation: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      navigationHelpButton: false,
      sceneModePicker: false,
      scene3DOnly: true,
    })
    const layer = getTianDiTuLayer({
      type: 'img',
      key: '8a684acb7b9d38ba08adf8035d0262ee',
    })

    const label = getTianDiTuLayer({
      type: 'cia',
      key: '8a684acb7b9d38ba08adf8035d0262ee',
    })
    viewer.value.imageryLayers.add(layer)
    viewer.value.imageryLayers.add(label)
  }
})
</script>

<template>
  <div ref="cesiumRef" />
</template>

添加 OpenStreetMap 地图

getOsmLayer

点我查看代码

<script lang="ts" setup>
import { Viewer } from 'cesium'
import { shallowRef, watchEffect } from 'vue'
import { getOSMLayer } from '.'

const viewer = shallowRef<Viewer>()

const cesiumRef = shallowRef<HTMLElement>()

watchEffect(() => {
  if (cesiumRef.value) {
    viewer.value = new Viewer(cesiumRef.value, {
      baseLayer: false,
      imageryProviderViewModels: undefined,
      shouldAnimate: true,
      infoBox: false,
      selectionIndicator: false,
      baseLayerPicker: false,
      timeline: false,
      animation: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      navigationHelpButton: false,
      sceneModePicker: false,
      scene3DOnly: true,
    })
    const layer = getOSMLayer()
    viewer.value.imageryLayers.add(layer)
  }
})
</script>

<template>
  <div ref="cesiumRef" />
</template>

源代码

点我查看代码

import type { T_MAP_TYPE } from '@summeruse/common'
import { ImageryLayer, OpenStreetMapImageryProvider, WebMapTileServiceImageryProvider } from 'cesium'

export type _WebMapTileServiceImageryProviderOptions = ConstructorParameters<typeof WebMapTileServiceImageryProvider>[0]

export type _ImageryLayerOptions = ConstructorParameters<typeof ImageryLayer>[1]

export interface GetTianDiTuLayerOptions {
  key: string
  type: T_MAP_TYPE
  imageryProviderOptions?: _WebMapTileServiceImageryProviderOptions
  imageryLayerOptions?: _ImageryLayerOptions
}

export function getTianDiTuLayer(data: GetTianDiTuLayerOptions) {
  const { key, type } = data
  const url = `https://t0.tianditu.gov.cn/${type}_w/wmts?tk=${key}`
  return new ImageryLayer(new WebMapTileServiceImageryProvider({
    url,
    layer: type,
    style: 'default',
    tileMatrixSetID: 'w',
    format: 'tiles',
    ...data.imageryProviderOptions,
  }), data.imageryLayerOptions)
}

export function getOSMLayer() {
  return new ImageryLayer(
    new OpenStreetMapImageryProvider({
      url: 'https://a.tile.openstreetmap.org/',
    }),
  )
}