You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
529 lines
20 KiB
529 lines
20 KiB
1 month ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<div ref="cesiumContainerRef" class="cesium-container"></div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<!-- <el-button class="get-view-btn" size="small" type="primary" @click="getCurrentViewInfo"
|
||
|
|
style="margin-right: 10px;">获取当前视角</el-button> -->
|
||
|
|
<!-- <el-button class="view-btn" size="small" type="success" @click="switchView('overview')"
|
||
|
|
style="margin-right: 10px;">概览视角</el-button> -->
|
||
|
|
<!-- <el-button class="view-btn" size="small" type="warning" @click="switchView('view1')"
|
||
|
|
style="margin-right: 10px;">视角1</el-button>
|
||
|
|
<el-button class="view-btn" size="small" type="warning" @click="switchView('view2')"
|
||
|
|
style="margin-right: 10px;">视角2</el-button> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { onMounted, onBeforeUnmount, ref } from 'vue';
|
||
|
|
import coordtransform from 'coordtransform';
|
||
|
|
import { MapApi } from "@/api/shorepower/map";
|
||
|
|
import { toRaw } from 'vue'
|
||
|
|
// ⚠️ 注意：通过 window 访问全局 Cesium 对象
|
||
|
|
const Cesium = window.Cesium;
|
||
|
|
|
||
|
|
let viewer = null;
|
||
|
|
const cesiumContainerRef = ref(null); // 引用 DOM 元素
|
||
|
|
const history = ref(null); // 历史数据
|
||
|
|
const dataWithModels = ref([]); // 存储带有模型实例的数据列表
|
||
|
|
|
||
|
|
// 定义预设视角参数
|
||
|
|
const presetViews = {
|
||
|
|
overview: {
|
||
|
|
"longitude": 118.5132903711312,
|
||
|
|
"latitude": 38.84648563549342,
|
||
|
|
"height": 12675.768680075478,
|
||
|
|
"heading": 353.6789759103708,
|
||
|
|
"pitch": -36.657258995301596,
|
||
|
|
"roll": 0.0343469697692715
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const createView = (obj) => {
|
||
|
|
return {
|
||
|
|
destination: Cesium.Cartesian3.fromDegrees(obj.longitude, obj.latitude, obj.height),
|
||
|
|
orientation: {
|
||
|
|
heading: Cesium.Math.toRadians(obj.heading),
|
||
|
|
pitch: Cesium.Math.toRadians(obj.pitch),
|
||
|
|
roll: Cesium.Math.toRadians(obj.roll)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
if (!Cesium) {
|
||
|
|
console.error("Cesium 对象未找到，请检查 index.html 文件！");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 步骤 1: 初始化 Viewer 并配置为使用高德地图影像和平坦地形
|
||
|
|
try {
|
||
|
|
viewer = new Cesium.Viewer(cesiumContainerRef.value, {
|
||
|
|
// **核心设置：禁用所有默认影像，我们将手动添加高德地图**
|
||
|
|
imageryProvider: false,
|
||
|
|
|
||
|
|
// **使用平坦地形，避免依赖 Cesium Ion**
|
||
|
|
terrainProvider: new Cesium.EllipsoidTerrainProvider(),
|
||
|
|
// sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
|
||
|
|
// 禁用所有不必要的UI控件
|
||
|
|
timeline: false,
|
||
|
|
animation: false,
|
||
|
|
baseLayerPicker: false,
|
||
|
|
geocoder: false,
|
||
|
|
sceneModePicker: false,
|
||
|
|
navigationHelpButton: false,
|
||
|
|
infoBox: false,
|
||
|
|
fullscreenButton: false,
|
||
|
|
homeButton: false,
|
||
|
|
|
||
|
|
// 启用抗锯齿和其他渲染优化
|
||
|
|
contextOptions: {
|
||
|
|
webgl: {
|
||
|
|
antialias: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 禁用所有鼠标和键盘的相机控制操作
|
||
|
|
/* viewer.scene.screenSpaceCameraController.enableRotate = false;
|
||
|
|
viewer.scene.screenSpaceCameraController.enableTranslate = false;
|
||
|
|
viewer.scene.screenSpaceCameraController.enableZoom = false;
|
||
|
|
viewer.scene.screenSpaceCameraController.enableTilt = false;
|
||
|
|
viewer.scene.screenSpaceCameraController.enableLook = false; */
|
||
|
|
|
||
|
|
// 渲染优化设置
|
||
|
|
// 启用抗锯齿
|
||
|
|
viewer.scene.postProcessStages.fxaa.enabled = true;
|
||
|
|
|
||
|
|
// 启用深度测试，确保模型能够被地形正确遮挡
|
||
|
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
||
|
|
|
||
|
|
// 启用时钟动画，确保模型能够根据时间更新
|
||
|
|
viewer.clock.shouldAnimate = true;
|
||
|
|
|
||
|
|
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200;
|
||
|
|
// 步骤 2: 添加高德地图卫星影像底图
|
||
|
|
const gaodeImage = new Cesium.UrlTemplateImageryProvider({
|
||
|
|
url: "https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
|
||
|
|
subdomains: ['1', '2', '3', '4'],
|
||
|
|
layer: 'gaodeImgLayer',
|
||
|
|
style: 'default',
|
||
|
|
format: 'image/png',
|
||
|
|
maximumLevel: 16
|
||
|
|
});
|
||
|
|
const dataInfo = history.value ? history.value : await MapApi.getAllData()
|
||
|
|
const shipData = await MapApi.getShipInfo({
|
||
|
|
harborDistrictId: 1
|
||
|
|
})
|
||
|
|
console.log('shipData', shipData)
|
||
|
|
|
||
|
|
// const unitedData =
|
||
|
|
|
||
|
|
// 通用添加函数，遍历dataInfo并创建标记
|
||
|
|
const addMarkersFromDataInfo = (dataInfo) => {
|
||
|
|
// 更严格的数组检查
|
||
|
|
if (!dataInfo || !Array.isArray(dataInfo) || dataInfo.length === 0) {
|
||
|
|
console.log('No valid dataInfo array provided');
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
|
||
|
|
// 创建新数组存储带有模型实例的数据
|
||
|
|
const dataWithModelsArray = [];
|
||
|
|
|
||
|
|
console.log(`Processing ${dataInfo.length} items`);
|
||
|
|
|
||
|
|
dataInfo.forEach((item, index) => {
|
||
|
|
// 检查基本数据结构
|
||
|
|
if (!item) {
|
||
|
|
console.warn(`Item at index ${index} is null or undefined`);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
// 创建包含模型实例的数据项副本
|
||
|
|
let itemWithModel = { ...item };
|
||
|
|
|
||
|
|
// 解析data字段为JSON对象
|
||
|
|
let dataObj;
|
||
|
|
if (typeof item.data === 'string') {
|
||
|
|
try {
|
||
|
|
dataObj = JSON.parse(item.data);
|
||
|
|
} catch (parseError) {
|
||
|
|
console.warn(`Failed to parse data for item ${item.id || index}:`, parseError);
|
||
|
|
dataWithModelsArray.push(itemWithModel); // 添加未解析成功的数据项
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
dataObj = item.data;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 检查dataObj是否有效
|
||
|
|
if (!dataObj) {
|
||
|
|
console.warn(`No data object found for item ${item.id || index}`);
|
||
|
|
dataWithModelsArray.push(itemWithModel); // 添加无数据对象的数据项
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取坐标信息 - 更严格的验证
|
||
|
|
let longitude, latitude;
|
||
|
|
let wgsLon, wgsLat;
|
||
|
|
if (dataObj.xy && Array.isArray(dataObj.xy) && dataObj.xy.length >= 2) {
|
||
|
|
const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
|
||
|
|
wgsLon = wgsCoords[0];
|
||
|
|
wgsLat = wgsCoords[1];
|
||
|
|
// 确保坐标是有效数字
|
||
|
|
latitude = wgsLat;
|
||
|
|
longitude = wgsLon;
|
||
|
|
// 检查坐标是否为有效数字
|
||
|
|
if (isNaN(latitude) || isNaN(longitude)) {
|
||
|
|
console.warn(`Invalid coordinates for item ${item.id || index}:`, dataObj.xy);
|
||
|
|
dataWithModelsArray.push(itemWithModel); // 添加坐标无效的数据项
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 检查坐标范围（简单验证）
|
||
|
|
if (Math.abs(latitude) > 90 || Math.abs(longitude) > 180) {
|
||
|
|
console.warn(`Coordinates out of range for item ${item.id || index}:`, dataObj.xy[1], dataObj.xy[0]);
|
||
|
|
dataWithModelsArray.push(itemWithModel); // 添加坐标超出范围的数据项
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
console.warn('无效的坐标信息:', item);
|
||
|
|
dataWithModelsArray.push(itemWithModel); // 添加无有效坐标的数据项
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (dataObj.icon === 'ship_green') {
|
||
|
|
const itemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
|
||
|
|
const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 15);
|
||
|
|
const statusPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
|
||
|
|
const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35);
|
||
|
|
// 投放船模型
|
||
|
|
const shipModel = viewer.entities.add({
|
||
|
|
name: 'Cargo Ship Model',
|
||
|
|
position: position,
|
||
|
|
orientation: Cesium.Transforms.headingPitchRollQuaternion(
|
||
|
|
position,
|
||
|
|
new Cesium.HeadingPitchRoll(
|
||
|
|
Cesium.Math.toRadians(dataObj.rotationAngle), // 航向角 (绕Z轴旋转)
|
||
|
|
Cesium.Math.toRadians(0), // 俯仰角 (绕Y轴旋转)
|
||
|
|
Cesium.Math.toRadians(0) // 翻滚角 (绕X轴旋转)
|
||
|
|
)
|
||
|
|
),
|
||
|
|
model: {
|
||
|
|
uri: '/model/cargo_ship_07.glb',
|
||
|
|
scale: 1.5, // 调整模型大小
|
||
|
|
// minimumPixelSize: 100, // 确保模型至少显示为50像素大小
|
||
|
|
// 启用深度测试，使模型能够被地形遮挡
|
||
|
|
enableDepthTest: true,
|
||
|
|
// 启用背光剔除，提高渲染性能
|
||
|
|
backFaceCulling: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 保存模型实例到数据项
|
||
|
|
itemWithModel.modelInstance = shipModel;
|
||
|
|
itemWithModel.modelType = 'ship';
|
||
|
|
itemWithModel = { ...itemWithModel, ...itemShipInfo };
|
||
|
|
|
||
|
|
viewer.entities.add({
|
||
|
|
position: labelPosition, // 船上方约10米
|
||
|
|
label: {
|
||
|
|
text: itemShipInfo.shipBasicInfo.name || `Marker-${item.id || index}`,
|
||
|
|
font: '12px sans-serif',
|
||
|
|
fillColor: Cesium.Color.WHITE,
|
||
|
|
outlineColor: Cesium.Color.BLACK,
|
||
|
|
outlineWidth: 2,
|
||
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
|
|
pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
|
||
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const overlayBillboard = viewer.entities.add({
|
||
|
|
position: statusPosition,
|
||
|
|
billboard: {
|
||
|
|
image: '/img/故障.png',
|
||
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
|
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
||
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||
|
|
scale: new Cesium.CallbackProperty(function (time, result) {
|
||
|
|
// t 会随着时间不断变化
|
||
|
|
const t = Cesium.JulianDate.toDate(time).getTime() / 1000;
|
||
|
|
const pulse = 0.6 + Math.sin(t * 4) * 0.2; // (基准0.6, 幅度±0.2)
|
||
|
|
return pulse;
|
||
|
|
}, false)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (dataObj.type === 'text') {
|
||
|
|
const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35);
|
||
|
|
viewer.entities.add({
|
||
|
|
position: labelPosition, // 船上方约10米
|
||
|
|
label: {
|
||
|
|
text: dataObj.name || `Marker-${item.id || index}`,
|
||
|
|
font: '20px sans-serif',
|
||
|
|
fillColor: Cesium.Color.WHITE,
|
||
|
|
outlineColor: Cesium.Color.BLACK,
|
||
|
|
outlineWidth: 2,
|
||
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
|
|
pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
|
||
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (dataObj.type === 'icon' && (dataObj.icon === 'interface_blue' || dataObj.icon === 'interface_red')) {
|
||
|
|
const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
|
||
|
|
const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 5);
|
||
|
|
// 投放岸电箱模型
|
||
|
|
const electricalBoxModel = viewer.entities.add({
|
||
|
|
name: 'Electrical Box Model',
|
||
|
|
position: position,
|
||
|
|
orientation: Cesium.Transforms.headingPitchRollQuaternion(
|
||
|
|
position,
|
||
|
|
new Cesium.HeadingPitchRoll(
|
||
|
|
Cesium.Math.toRadians(dataObj.rotationAngle), // 航向角 (绕Z轴旋转)
|
||
|
|
Cesium.Math.toRadians(0), // 俯仰角 (绕Y轴旋转)
|
||
|
|
Cesium.Math.toRadians(0) // 翻滚角 (绕X轴旋转)
|
||
|
|
)
|
||
|
|
),
|
||
|
|
model: {
|
||
|
|
uri: '/model/electrical_box.glb',
|
||
|
|
scale: 1, // 调整模型大小
|
||
|
|
// minimumPixelSize: 10, // 确保模型至少显示为50像素大小
|
||
|
|
// 启用深度测试，使模型能够被地形遮挡
|
||
|
|
enableDepthTest: true,
|
||
|
|
// 启用背光剔除，提高渲染性能
|
||
|
|
backFaceCulling: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 保存模型实例到数据项
|
||
|
|
itemWithModel.modelInstance = electricalBoxModel;
|
||
|
|
itemWithModel.modelType = 'electrical_box';
|
||
|
|
|
||
|
|
viewer.entities.add({
|
||
|
|
position: labelPosition, // 船上方约10米
|
||
|
|
label: {
|
||
|
|
text: '岸电箱' || `Marker-${item.id || index}`,
|
||
|
|
font: '10px sans-serif',
|
||
|
|
fillColor: Cesium.Color.WHITE,
|
||
|
|
outlineColor: Cesium.Color.BLACK,
|
||
|
|
outlineWidth: 2,
|
||
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
|
|
pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
|
||
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 创建红点标记
|
||
|
|
/* const entity = viewer.entities.add({
|
||
|
|
name: item.name || `Marker-${item.id || index}`,
|
||
|
|
position: Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1),
|
||
|
|
point: {
|
||
|
|
pixelSize: 10,
|
||
|
|
color: Cesium.Color.RED,
|
||
|
|
outlineColor: Cesium.Color.WHITE,
|
||
|
|
outlineWidth: 2
|
||
|
|
},
|
||
|
|
// 可以添加标签显示名称
|
||
|
|
label: {
|
||
|
|
text: item.name || `Marker-${item.id || index}`,
|
||
|
|
font: '14px sans-serif',
|
||
|
|
fillColor: Cesium.Color.WHITE,
|
||
|
|
outlineColor: Cesium.Color.BLACK,
|
||
|
|
outlineWidth: 2,
|
||
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
|
|
pixelOffset: new Cesium.Cartesian2(0, -15)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// 保存点标记实例到数据项
|
||
|
|
itemWithModel.modelInstance = entity;
|
||
|
|
itemWithModel.modelType = 'point';
|
||
|
|
*/
|
||
|
|
|
||
|
|
// 将处理后的数据项添加到新数组
|
||
|
|
dataWithModelsArray.push(itemWithModel);
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error processing item:', item, error);
|
||
|
|
// 创建一个基本的数据项副本并添加到数组
|
||
|
|
dataWithModelsArray.push({ ...item });
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return dataWithModelsArray;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 步骤 3: 将图层添加到 Viewer 中
|
||
|
|
viewer.imageryLayers.addImageryProvider(gaodeImage);
|
||
|
|
|
||
|
|
// 调用通用函数创建标记并获取带有模型实例的数据
|
||
|
|
dataWithModels.value = addMarkersFromDataInfo(dataInfo);
|
||
|
|
|
||
|
|
// 设置初始视角
|
||
|
|
viewer.camera.flyTo(createView(presetViews.overview));
|
||
|
|
// 设置显示高度阈值
|
||
|
|
const SHOW_HEIGHT = 30000; // 高度 > 5000m 才显示模型等信息
|
||
|
|
// const targets = []; // 把需要控制的 entities push 进来
|
||
|
|
const targets = dataWithModels.value
|
||
|
|
.filter(item => item.modelInstance)
|
||
|
|
.map(item => toRaw(item.modelInstance));
|
||
|
|
console.log('targets', targets)
|
||
|
|
viewer.camera.changed.addEventListener(() => {
|
||
|
|
// 这个函数会在相机的任何属性发生变化后立即被调用。
|
||
|
|
const height = viewer.camera.positionCartographic.height;
|
||
|
|
// console.log("相机高度（即缩放级别）已变化:", height.toFixed(2), "米");
|
||
|
|
|
||
|
|
// 控制模型显示/隐藏
|
||
|
|
const visible = height <= SHOW_HEIGHT; // 1000m内才显示模型等信息
|
||
|
|
targets.forEach(entity => {
|
||
|
|
if (entity.show !== visible) {
|
||
|
|
entity.show = visible;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 其他缩放级别逻辑
|
||
|
|
if (height < 100000) {
|
||
|
|
// 放大到街景级别
|
||
|
|
console.log("当前处于近距离缩放级别。");
|
||
|
|
} else if (height > 5000000) {
|
||
|
|
// 缩小到全球级别
|
||
|
|
console.log("当前处于远距离缩放级别。");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 添加地图点击事件
|
||
|
|
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||
|
|
handler.setInputAction(function (movement) {
|
||
|
|
console.log('地图点击事件触发');
|
||
|
|
|
||
|
|
// 尝试多种方式获取点击位置
|
||
|
|
const ray = viewer.camera.getPickRay(movement.position);
|
||
|
|
|
||
|
|
// 方法1: 从地球表面拾取
|
||
|
|
let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
||
|
|
|
||
|
|
// 如果从地球表面拾取失败，尝试从场景中拾取
|
||
|
|
if (!cartesian) {
|
||
|
|
cartesian = viewer.scene.pickPosition(movement.position);
|
||
|
|
console.log('使用场景拾取方法');
|
||
|
|
}
|
||
|
|
|
||
|
|
// 如果仍然失败，尝试使用相机计算位置
|
||
|
|
if (!cartesian) {
|
||
|
|
// 获取屏幕中心点作为替代方案（仅用于调试）
|
||
|
|
console.log('无法从点击位置获取精确坐标');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (cartesian) {
|
||
|
|
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
||
|
|
if (cartographic) {
|
||
|
|
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
|
||
|
|
const latitude = Cesium.Math.toDegrees(cartographic.latitude);
|
||
|
|
const gcj02 = coordtransform.gcj02towgs84(longitude, latitude);
|
||
|
|
console.log('点击位置经纬度:', {
|
||
|
|
longitude: gcj02[0],
|
||
|
|
latitude: gcj02[1]
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
console.log('无法从笛卡尔坐标转换为大地坐标');
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
console.log('未能获取到地球表面的点击位置');
|
||
|
|
}
|
||
|
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
|
|
|
||
|
|
// 确保启用场景的鼠标事件
|
||
|
|
viewer.scene.screenSpaceCameraController.enableInputs = true;
|
||
|
|
|
||
|
|
// 启用拾取透明物体
|
||
|
|
viewer.scene.useDepthPicking = true;
|
||
|
|
|
||
|
|
console.log('Cesium 高德地图 Viewer 初始化成功');
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Cesium Viewer 初始化失败:', error);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 视角切换方法
|
||
|
|
const switchView = (viewName) => {
|
||
|
|
const viewParams = presetViews[viewName];
|
||
|
|
if (viewParams && viewer) {
|
||
|
|
viewer.camera.flyTo({
|
||
|
|
...createView(viewParams),
|
||
|
|
duration: 2.0 // 动画持续时间（秒）
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 视角切换方法
|
||
|
|
const switchModelView = (view) => {
|
||
|
|
const modelInstance = toRaw(view);
|
||
|
|
console.log(modelInstance)
|
||
|
|
if (viewer && view) {
|
||
|
|
viewer.flyTo(modelInstance);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 获取当前视角信息的方法
|
||
|
|
const getCurrentViewInfo = () => {
|
||
|
|
if (!viewer) {
|
||
|
|
console.warn('Viewer 尚未初始化');
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const camera = viewer.camera;
|
||
|
|
|
||
|
|
const position = camera.position; // 世界笛卡尔坐标系 x,y,z
|
||
|
|
const cartographic = Cesium.Cartographic.fromCartesian(position);
|
||
|
|
console.log(
|
||
|
|
{
|
||
|
|
longitude: Cesium.Math.toDegrees(cartographic.longitude),
|
||
|
|
latitude: Cesium.Math.toDegrees(cartographic.latitude),
|
||
|
|
height: cartographic.height,
|
||
|
|
heading: Cesium.Math.toDegrees(camera.heading),
|
||
|
|
pitch: Cesium.Math.toDegrees(camera.pitch),
|
||
|
|
roll: Cesium.Math.toDegrees(camera.roll)
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
// 暴露方法和数据给父组件使用
|
||
|
|
defineExpose({
|
||
|
|
switchView,
|
||
|
|
dataWithModels,
|
||
|
|
switchModelView
|
||
|
|
});
|
||
|
|
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
// 销毁 Viewer，释放 WebGL 资源
|
||
|
|
if (viewer) {
|
||
|
|
viewer.destroy();
|
||
|
|
viewer = null;
|
||
|
|
console.log('Cesium Viewer 已销毁');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.cesium-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-group {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
z-index: 1000;
|
||
|
|
display: flex;
|
||
|
|
gap: 12rpx;
|
||
|
|
}
|
||
|
|
</style>
|