90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
|
// 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
|
||
|
|
});
|
||
|
|
|
||
|
|
// 初始化工具类
|
||
|
|
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
|
||
|
|
};
|
||
|
|
}
|