cquavui/src/views/cesiums/components/useCesium.ts

// src/composables/useCesium.ts
import { ref, onMounted, onUnmounted } from 'vue';
import * as Cesium from 'cesium';
import { ViewTool } from './ViewTool';
import { MarkerTool } from './MarkerTool';
import { ModelTool } from './ModelTool';
import { CoordinatePicker } from './CoordinatePicker';
import { DrawingTool } from './DrawingTool';

export function useCesium(containerId: string) {
  const viewer = ref<Cesium.Viewer | null>(null);
  const viewTool = ref<ViewTool | null>(null);
  const markerTool = ref<MarkerTool | null>(null);
  const modelTool = ref<ModelTool | null>(null);
  const coordinatePicker = ref<CoordinatePicker | null>(null);
  const drawingTool = ref<DrawingTool | null>(null);
  const isInitialized = ref(false);

  // 初始化 Cesium
  const initializeCesium = async (): Promise<void> => {
    if (viewer.value) return;

    try {
      // Cesium.Ion.defaultAccessToken = 'your-cesium-ion-access-token';

      // viewer.value = new Cesium.Viewer(containerId, {
      //   terrainProvider: await Cesium.createWorldTerrainAsync(),
      //   animation: false,
      //   timeline: false,
      //   baseLayerPicker: false,
      //   geocoder: false,
      //   homeButton: false,
      //   sceneModePicker: false,
      //   navigationHelpButton: false,
      //   fullscreenButton: false,
      //   infoBox: false
      // });

      viewer.value =  new Cesium.Viewer(containerId, {
            navigationHelpButton: false,
            sceneModePicker: true,
            // 搜索键
            // geocoder: false,
            // home键
            homeButton: true,
            // 全屏按钮
            fullscreenButton: false,

            imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                url: "http://t0.tianditu.com/img_w/wmts?service=wmts&tk=347521453441f82bd83c6f0b15240e50&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
                layer: "tdtBasicLayer",
                style: "default",
                format: "image/jpeg",
                tileMatrixSetID: "GoogleMapsCompatible",
                maximumLevel: 18,
            }),
            // 地图选择器
            // baseLayerPicker: false,
            selectionIndicator: false, //鼠标点击wms选择框
            infoBox: false,
            timeline: false,
            animation: false
        });
      // 初始化工具类
      viewTool.value = new ViewTool(viewer.value);
      markerTool.value = new MarkerTool(viewer.value);
      modelTool.value = new ModelTool(viewer.value);
      coordinatePicker.value = new CoordinatePicker(viewer.value);
      drawingTool.value = new DrawingTool(viewer.value);

      isInitialized.value = true;

      // 设置初始视角
      viewTool.value.setChongqingView('overview');

    } catch (error) {
      console.error('Failed to initialize Cesium:', error);
    }
  };

  // 销毁 Cesium
const destroyCesium = (): void => {
    if (viewer.value) {
      coordinatePicker.value?.destroy();
      drawingTool.value?.destroy();
      viewer.value.destroy();
      viewer.value = null;
      viewTool.value = null;
      markerTool.value = null;
      modelTool.value = null;
      coordinatePicker.value = null;
      drawingTool.value = null;
      isInitialized.value = false;
    }
  };
  onMounted(() => {
    initializeCesium();
  });

  onUnmounted(() => {
    destroyCesium();
  });

  return {
    viewer,
    viewTool,
    markerTool,
    modelTool,
    coordinatePicker,
    drawingTool,
    isInitialized,
    initializeCesium,
    destroyCesium
  };
}