115 lines
3.6 KiB
TypeScript
115 lines
3.6 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
|
|
// });
|
|
|
|
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
|
|
};
|
|
} |