tcctyn-ui/src/components/CesiumMap/index.vue

<template>
  <div id="map-container" class="map-container">
    <slot></slot>
  </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { useConfigSetting } from './mixins/useConfigSetting.js';

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const emits = defineEmits(['init'])
let viewer = null;


onMounted(async () => {
  initMap();
})

// 初始化地图
const initMap = async () => {
  const oldOptions = {
    // 动画仪表盘
    animation: false,
    // 基础图层选择按钮
    baseLayerPicker: false,
    // 全屏按钮
    fullscreenButton: false,
    vrButton: false,
    // 地名地址查询框
    geocoder: false,
    // 返回地球视角按钮
    homeButton: false,
    // 属性框（显示拾取要素的属性）
    infoBox: false,
    // 场景模式切换按钮（三维地球、2.5维场景、二维地图）
    sceneModePicker: false,
    // 拾取要素识别（显示个框，但不明确选中内容）？？？
    selectionIndicator: false,
    // 时间轴
    timeline: false,
    // 操作提示按钮
    navigationHelpButton: false,
    // 超采样开4倍，如果显示困难再降低
    msaaSamples: 2,
    scene3DOnly: true,
    shouldAnimate: true,
    contextOptions: {
      webgl: {
        // 允许截图
        preserveDrawingBuffer: true,
      },
    },
  }
  // 添加cesium的token（目前使用zq发布的）
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiZjljMTU0MC03OGY5LTRjMzQtYWJkYS02MzI2OTI2OGUyNTgiLCJpZCI6MzE3NTgsImlhdCI6MTc0MTA1MjY3OH0.uvbT5jSUFS-wU41MvzAuY33yfYnUiOWQCWad2KSX28o'
  console.log(props.options.configJson)
  let configJson = props.options.configJson;
  try {
    configJson = JSON.parse(configJson)
  } catch (e) {
    configJson = {}
  }
  if (props.options.isTerrainProvider) {
    let terrainProvider = await Cesium.createWorldTerrainAsync()
    // 是否使用自定义地形
    if(props.options.cesiumTerrainProviderUrl) {
      const customTerrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(props.options.cesiumTerrainProviderUrl);
      if(customTerrainProvider) {
        terrainProvider = customTerrainProvider;
      }
    }
    oldOptions.terrainProvider = terrainProvider;
  }
  let options = Object.assign(oldOptions, configJson)
  viewer = new Cesium.Viewer('map-container', options)

  // 启用深度测试
  // viewer.scene.globe.depthTestAgainstTerrain = true;
  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'

  const { setInitConfig } = useConfigSetting(viewer);

  setInitConfig(props.options);

  // 取消左键双击
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

  emits('init', viewer);
}


onUnmounted(() => {
  if (viewer) {
    viewer.entities.removeAll()
    viewer.imageryLayers.removeAll()
    for (let index = 0; index < viewer.dataSources.length; index++) {
      const datasource = viewer.dataSources.get(index);
      datasource.entities.removeAll()
    }
    viewer.dataSources.removeAll(true)
    // viewer.scene.primitives.removeAll();
    viewer.destroy()
  }
})

</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;
}
</style>