// 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(null); const viewTool = ref(null); const markerTool = ref(null); const modelTool = ref(null); const coordinatePicker = ref(null); const drawingTool = ref(null); const isInitialized = ref(false); // 初始化 Cesium const initializeCesium = async (): Promise => { 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 }; }