cesium-viewer

组件介绍

cesium-viewer 组件是一个基于 Cesium 的地图容器组件。

viewer 实例有以下方式获取:

1.通过组件实例获取

2.后代组件通过 useCesiumViewer 获取

3.子组件通过 props 获取

使用示例

点我查看代码

viewer-demo.vue

<script lang="ts" setup>
import { CesiumViewer } from '@summeruse/cesium'
import ContentDemo from './content-demo.vue'
</script>

<template>
  <CesiumViewer class="w-100% h-300px">
    <template #default="{ viewer }">
      <ContentDemo :viewer />
    </template>
  </CesiumViewer>
</template>

content-demo.vue

<script lang="ts" setup>
import type { Viewer } from 'cesium'
import { getTianDiTuLayer, useCesiumViewer } from '@summeruse/cesium'
import { Cartesian3 } from 'cesium'

const props = defineProps<{
  viewer: Viewer
}>()
const { viewer } = props // props 获取 viewer

viewer.camera.flyTo({
  destination: Cartesian3.fromDegrees(116.397428, 39.90923, 2000000.0),
  orientation: {
    heading: 0,
    pitch: -Math.PI / 4,
    roll: 0,
  },
})

const viewer2 = useCesiumViewer()! // useCesiumViewer 获取 viewer

const layer = getTianDiTuLayer({
  type: 'img',
  key: '8a684acb7b9d38ba08adf8035d0262ee',
})

viewer2.imageryLayers.add(layer)
</script>

<template>
  <div />
</template>

组件代码

点我查看代码

<script lang="ts" setup>
import type { CesiumViewerProps } from './props'
import { Viewer } from 'cesium'
import { provide, shallowRef, watchEffect } from 'vue'
import { cesiumViewerInjectionKey } from './props'

const props = withDefaults(defineProps<CesiumViewerProps>(), {
  viewerOptions: () => ({
    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,
  }),
})

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, {
  creditContainer: iconContainer,
  ...props.viewerOptions,
})

const cesiumRef = shallowRef<HTMLElement>()

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

defineExpose({
  viewer,
})

provide(cesiumViewerInjectionKey, viewer)
</script>

<template>
  <div ref="cesiumRef" class="su-cesium-viewer">
    <div class="su-cesium-viewer__container">
      <slot :viewer />
    </div>
  </div>
</template>

<style lang="scss">
  .su-cesium-viewer {
    position: relative;

    .su-cesium-viewer__container {
      position: absolute;
    }
  }
</style>

类型定义

点我查看代码

import type { Viewer } from 'cesium'
import type { InjectionKey } from 'vue'
import { inject } from 'vue'

export type _ViewerOptions = ConstructorParameters<typeof Viewer>[1]

export type ViewerOptions = _ViewerOptions & {

}

export interface CesiumViewerProps {
  viewerOptions?: ViewerOptions
}

export const cesiumViewerInjectionKey = Symbol('cesiumViewerInjectionKey') as InjectionKey<Viewer>

export function useCesiumViewer() {
  return inject(cesiumViewerInjectionKey)
}