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.
911 lines
34 KiB
911 lines
34 KiB
<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;
|
|
|
|
// 自定义流动线材质类
|
|
class PolylineFlowMaterialProperty {
|
|
constructor(options) {
|
|
options = options || {};
|
|
this._definitionChanged = new Cesium.Event();
|
|
this._color = undefined;
|
|
this._colorSubscription = undefined;
|
|
this.color = options.color || Cesium.Color.YELLOW;
|
|
this.duration = options.duration || 2000; // 加快速度，从2000ms减少到1000ms
|
|
this.percent = options.percent || 0.1;
|
|
this.gradient = options.gradient || 0.01;
|
|
this._time = (new Date()).getTime();
|
|
}
|
|
|
|
get isConstant() {
|
|
return false;
|
|
}
|
|
|
|
get definitionChanged() {
|
|
return this._definitionChanged;
|
|
}
|
|
|
|
getType() {
|
|
return 'PolylineFlow';
|
|
}
|
|
|
|
getValue(time, result) {
|
|
if (!result) {
|
|
result = {};
|
|
}
|
|
|
|
result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
|
|
result.image = undefined;
|
|
result.time = ((new Date()).getTime() - this._time) % this.duration / this.duration;
|
|
result.percent = this.percent;
|
|
result.gradient = this.gradient;
|
|
|
|
return result;
|
|
}
|
|
|
|
equals(other) {
|
|
return this === other ||
|
|
(other instanceof PolylineFlowMaterialProperty &&
|
|
Cesium.Property.equals(this._color, other._color) &&
|
|
this.duration === other.duration &&
|
|
this.percent === other.percent &&
|
|
this.gradient === other.gradient);
|
|
}
|
|
}
|
|
|
|
Object.defineProperties(PolylineFlowMaterialProperty.prototype, {
|
|
color: Cesium.createPropertyDescriptor('color')
|
|
});
|
|
|
|
// 注册自定义材质
|
|
Cesium.Material.PolylineFlowType = 'PolylineFlow';
|
|
Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineFlowType, {
|
|
fabric: {
|
|
type: Cesium.Material.PolylineFlowType,
|
|
uniforms: {
|
|
color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
|
|
time: 0,
|
|
percent: 0.1,
|
|
gradient: 0.01
|
|
},
|
|
source: `
|
|
czm_material czm_getMaterial(czm_materialInput materialInput)
|
|
{
|
|
czm_material material = czm_getDefaultMaterial(materialInput);
|
|
vec2 st = materialInput.st;
|
|
float t = time * 3.0; // 调整箭头速度
|
|
|
|
// 基础线段颜色，确保线条始终可见
|
|
vec3 baseColor = color.rgb;
|
|
|
|
// 创建箭头效果
|
|
float alpha = 0.2; // 基础透明度
|
|
|
|
// 创建多个移动的箭头
|
|
float arrowPos1 = mod(t - st.s * 5.0, 5.0);
|
|
float arrow1 = smoothstep(0.7, 0.9, arrowPos1) * (1.0 - smoothstep(0.9, 1.1, arrowPos1));
|
|
float arrowHead1 = smoothstep(0.4, 0.9, arrowPos1) * (1.0 - smoothstep(0.9, 1.3, arrowPos1));
|
|
|
|
float arrowPos2 = mod(t - st.s * 5.0 + 2.5, 5.0);
|
|
float arrow2 = smoothstep(0.7, 0.9, arrowPos2) * (1.0 - smoothstep(0.9, 1.1, arrowPos2));
|
|
float arrowHead2 = smoothstep(0.4, 0.9, arrowPos2) * (1.0 - smoothstep(0.9, 1.3, arrowPos2));
|
|
|
|
// 组合箭头效果
|
|
float arrowEffect = max(max(arrow1, arrowHead1), max(arrow2, arrowHead2));
|
|
|
|
// 应用箭头效果到透明度
|
|
alpha = 0.2 + arrowEffect * 0.8;
|
|
|
|
material.alpha = alpha;
|
|
material.diffuse = baseColor;
|
|
return material;
|
|
}
|
|
`
|
|
},
|
|
translucent: function (material) {
|
|
return true;
|
|
}
|
|
});
|
|
|
|
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
|
|
}
|
|
};
|
|
|
|
// 岸电箱点击回调函数
|
|
let onElectricalBoxClick = null;
|
|
|
|
// 设置岸电箱点击回调函数的方法
|
|
const setElectricalBoxClickCallback = (callback) => {
|
|
onElectricalBoxClick = callback;
|
|
};
|
|
|
|
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,
|
|
// infoBox: true,
|
|
// **使用平坦地形，避免依赖 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;
|
|
|
|
// 相机控制设置
|
|
const controller = viewer.scene.screenSpaceCameraController;
|
|
// 设置最大缩放距离（相机到地球中心的最大距离）
|
|
// 500,000.0 米 = 500 公里
|
|
const MAX_DISTANCE = 500000.0;
|
|
|
|
// 启用缩放，然后设置其最大限制
|
|
controller.enableZoom = true;
|
|
controller.maximumZoomDistance = MAX_DISTANCE;
|
|
|
|
// （可选）同时限制最小缩放距离，防止滚轮进入模型内部
|
|
// 例如，限制最小距离为 1000.0 米
|
|
const MIN_HEIGHT = 1200;
|
|
controller.minimumZoomDistance = MIN_HEIGHT - 100;
|
|
|
|
const canvas = viewer.scene.canvas;
|
|
|
|
canvas.addEventListener(
|
|
"wheel",
|
|
(e) => {
|
|
const height = viewer.camera.positionCartographic.height;
|
|
|
|
// 只拦截“继续向内”
|
|
if (height <= MIN_HEIGHT && e.deltaY < 0) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
},
|
|
{
|
|
passive: false,
|
|
capture: 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并创建标记
|
|
let arr = []
|
|
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;
|
|
}
|
|
console.log('dataObj.icon', dataObj.icon)
|
|
if (dataObj.icon === 'ship_green' || dataObj.icon === 'ship_red') {
|
|
const itemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
|
|
if (!itemShipInfo) {
|
|
return;
|
|
}
|
|
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: '20px sans-serif',
|
|
fillColor: Cesium.Color.LIME,
|
|
outlineColor: Cesium.Color.BLACK,
|
|
outlineWidth: 2,
|
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
|
|
disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
|
|
}
|
|
});
|
|
// 根据概率分布决定是否显示状态图标
|
|
// 50%概率不显示，25%显示故障，25%显示离线
|
|
const rand = Math.random();
|
|
let statusImage = null;
|
|
if (rand < 0.8) {
|
|
// 50%概率：不显示状态图标
|
|
statusImage = null;
|
|
} else if (rand < 0.9) {
|
|
// 25%概率：显示故障图标
|
|
statusImage = '/img/故障.png';
|
|
} else {
|
|
// 25%概率：显示离线图标
|
|
statusImage = '/img/离线.png';
|
|
}
|
|
|
|
// 只有当需要显示状态图标时才添加实体
|
|
if (statusImage) {
|
|
const overlayBillboard = viewer.entities.add({
|
|
position: statusPosition,
|
|
billboard: {
|
|
image: statusImage,
|
|
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.4 + Math.sin(t * 4) * 0.1; // (基准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 itemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
|
|
const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
|
|
const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 5);
|
|
// 投放岸电箱模型
|
|
const electricalBoxModel = viewer.entities.add({
|
|
name: '岸电箱',
|
|
position: position,
|
|
// 添加唯一标识用于识别点击事件
|
|
properties: {
|
|
modelType: 'electrical_box',
|
|
data: itemWithModel
|
|
},
|
|
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.5, // 调整模型大小
|
|
// minimumPixelSize: 10, // 确保模型至少显示为50像素大小
|
|
// 启用深度测试，使模型能够被地形遮挡
|
|
enableDepthTest: true,
|
|
// 启用背光剔除，提高渲染性能
|
|
backFaceCulling: true
|
|
},
|
|
});
|
|
console.log(item)
|
|
if (item.name.includes('国投-206泊位-插座箱') || item.name.includes('国投-207泊位-插座箱')) {
|
|
arr.push(electricalBoxModel)
|
|
}
|
|
|
|
// 保存模型实例到数据项
|
|
itemWithModel.modelInstance = electricalBoxModel;
|
|
itemWithModel.modelType = 'electrical_box';
|
|
itemWithModel = { ...itemWithModel, ...itemShipInfo };
|
|
|
|
viewer.entities.add({
|
|
// pickable: false,
|
|
position: labelPosition, // 船上方约10米
|
|
properties: {
|
|
modelType: 'electrical_box',
|
|
data: itemWithModel
|
|
},
|
|
label: {
|
|
text: '岸电箱' || `Marker-${item.id || index}`,
|
|
font: '16px 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 // 始终可见
|
|
}
|
|
});
|
|
|
|
// 根据概率分布决定是否显示状态图标
|
|
// 50%概率不显示，25%显示故障，25%显示离线
|
|
const rand = Math.random();
|
|
let statusImage = null;
|
|
if (rand < 0.5) {
|
|
// 50%概率：不显示状态图标
|
|
statusImage = null;
|
|
} else if (rand < 0.75) {
|
|
// 25%概率：显示故障图标
|
|
statusImage = '/img/故障.png';
|
|
} else {
|
|
// 25%概率：显示离线图标
|
|
statusImage = '/img/离线.png';
|
|
}
|
|
|
|
// 只有当需要显示状态图标时才添加实体
|
|
if (statusImage) {
|
|
const overlayBillboard = viewer.entities.add({
|
|
position: position,
|
|
// pickable: false,
|
|
properties: {
|
|
modelType: 'electrical_box',
|
|
data: itemWithModel
|
|
},
|
|
billboard: {
|
|
image: statusImage,
|
|
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.2 + Math.sin(t * 4) * 0.1; // (基准0.6, 幅度±0.2)
|
|
return pulse;
|
|
}, false)
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// 创建红点标记
|
|
/* 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);
|
|
|
|
// const xitemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
|
|
console.log('111arr', arr)
|
|
const wgsCoords = coordtransform.wgs84togcj02(118.452068408873, 38.94922323975237);
|
|
const xposition = Cesium.Cartesian3.fromDegrees(wgsCoords[0], wgsCoords[1], 1);
|
|
const xlabelPosition = Cesium.Cartesian3.fromDegrees(wgsCoords[0], wgsCoords[1], 5);
|
|
// 投放岸电箱模型
|
|
const xelectricalBoxModel = viewer.entities.add({
|
|
name: '岸电箱',
|
|
position: xposition,
|
|
// 添加唯一标识用于识别点击事件
|
|
properties: {
|
|
modelType: 'electrical_box',
|
|
// data: itemWithModel
|
|
},
|
|
orientation: Cesium.Transforms.headingPitchRollQuaternion(
|
|
xposition,
|
|
new Cesium.HeadingPitchRoll(
|
|
Cesium.Math.toRadians(150), // 航向角 (绕Z轴旋转)
|
|
Cesium.Math.toRadians(0), // 俯仰角 (绕Y轴旋转)
|
|
Cesium.Math.toRadians(0) // 翻滚角 (绕X轴旋转)
|
|
)
|
|
),
|
|
model: {
|
|
uri: '/model/electrical_box.glb',
|
|
scale: 1.5, // 调整模型大小
|
|
// minimumPixelSize: 10, // 确保模型至少显示为50像素大小
|
|
// 启用深度测试，使模型能够被地形遮挡
|
|
enableDepthTest: true,
|
|
// 启用背光剔除，提高渲染性能
|
|
backFaceCulling: true
|
|
},
|
|
});
|
|
|
|
viewer.entities.add({
|
|
// pickable: false,
|
|
position: xlabelPosition, // 船上方约10米
|
|
properties: {
|
|
modelType: 'electrical_box',
|
|
// data: itemWithModel
|
|
},
|
|
label: {
|
|
text: '岸电箱',
|
|
font: '16px 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 // 始终可见
|
|
}
|
|
});
|
|
|
|
// 创建流动线材质
|
|
function createFlowMaterial() {
|
|
return new PolylineFlowMaterialProperty({
|
|
color: Cesium.Color.YELLOW,
|
|
duration: 2000, // 动画持续时间(毫秒)
|
|
percent: 0.1, // 流动部分占整个线条的比例
|
|
gradient: 0.1 // 流动部分的渐变
|
|
});
|
|
}
|
|
|
|
// 创建连接线：将xelectricalBoxModel与arr中的每个实体连接
|
|
arr.forEach((entity, index) => {
|
|
// 创建唯一的线实体ID
|
|
const lineEntity = viewer.entities.add({
|
|
name: `connection_line_${index}`,
|
|
polyline: {
|
|
positions: new Cesium.CallbackProperty(() => {
|
|
// 获取主岸电箱的位置
|
|
const mainPosition = xelectricalBoxModel.position.getValue(viewer.clock.currentTime);
|
|
// 获取目标实体的位置
|
|
const targetPosition = entity.position.getValue(viewer.clock.currentTime);
|
|
|
|
// 返回包含两个点的数组（起点和终点）
|
|
return [mainPosition, targetPosition];
|
|
}, false),
|
|
width: 3,
|
|
material: createFlowMaterial(),
|
|
// 启用深度测试，使线条能够被地形遮挡
|
|
enableDepthTest: true
|
|
}
|
|
});
|
|
console.log('lineEntity', lineEntity)
|
|
});
|
|
|
|
// 设置初始视角
|
|
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 pickedObject = viewer.scene.pick(movement.position);
|
|
|
|
if (pickedObject && pickedObject.id && pickedObject.id.properties) {
|
|
// 检查是否是岸电箱模型
|
|
const properties = pickedObject.id.properties;
|
|
if (properties.modelType && properties.modelType.getValue() === 'electrical_box') {
|
|
// 触发岸电箱点击回调
|
|
const electricalBoxData = properties.data.getValue();
|
|
console.log('岸电箱模型被点击:', electricalBoxData);
|
|
|
|
// 如果定义了回调函数，则调用它
|
|
if (typeof onElectricalBoxClick === 'function') {
|
|
onElectricalBoxClick(electricalBoxData);
|
|
}
|
|
|
|
// 阻止进一步处理
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 如果不是点击模型，则处理地面点击
|
|
// 尝试多种方式获取点击位置
|
|
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 // 动画持续时间（秒）
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* 切换到指定模型视图，并允许设置自定义的飞离距离。
|
|
* @param {Cesium.Entity} view - 要飞向的 Entity 实例。
|
|
* @param {number} [extraDistance=15000.0] - 额外的飞离距离 (米)。
|
|
* @param {number} [estimatedRadius=500.0] - 用于计算视角范围的估计模型半径 (米)。
|
|
*/
|
|
const switchModelView = (view, extraDistance = 1000, estimatedRadius = 500.0) => {
|
|
const entityInstance = toRaw(view);
|
|
console.log('目标模型实体:', entityInstance);
|
|
|
|
if (viewer && entityInstance && entityInstance.position) {
|
|
|
|
// 1. 获取模型当前的世界坐标
|
|
// 必须使用 getValue(viewer.clock.currentTime) 来获取当前准确的位置
|
|
const position = entityInstance.position.getValue(viewer.clock.currentTime);
|
|
|
|
if (!position) {
|
|
console.warn("无法获取模型位置，执行默认 flyTo。");
|
|
viewer.flyTo(entityInstance, { duration: 3.0 });
|
|
return;
|
|
}
|
|
|
|
// 2. 手动创建边界球 (因为 Entity 实例没有 readyPromise 或 boundingSphere 属性)
|
|
// 使用一个估计的半径来计算视角范围
|
|
const manualBoundingSphere = new Cesium.BoundingSphere(
|
|
position,
|
|
estimatedRadius // 使用估计半径
|
|
);
|
|
|
|
// 3. 定义相机相对于边界球的偏移量 (Heading, Pitch, Range)
|
|
const cameraOffset = new Cesium.HeadingPitchRange(
|
|
Cesium.Math.toRadians(0.0), // Heading (航向), 0度朝北
|
|
Cesium.Math.toRadians(-45.0), // Pitch (俯仰), -45度斜向下看
|
|
manualBoundingSphere.radius + extraDistance // Range (距离) = 估计半径 + 额外距离
|
|
);
|
|
|
|
// 4. 执行飞行动作
|
|
viewer.camera.flyToBoundingSphere(
|
|
manualBoundingSphere,
|
|
{
|
|
offset: cameraOffset,
|
|
duration: 3.0 // 飞行时间
|
|
}
|
|
);
|
|
console.log(`飞往模型中心，距离模型中心 ${(manualBoundingSphere.radius + extraDistance) / 1000} 公里。`);
|
|
|
|
} else if (viewer && entityInstance) {
|
|
// 作为一个简单的 fallback 选项
|
|
viewer.flyTo(entityInstance, { duration: 3.0 });
|
|
console.warn("模型位置属性无效，执行默认 flyTo。");
|
|
} else {
|
|
console.error("Cesium Viewer 或模型实例无效。");
|
|
}
|
|
};
|
|
|
|
// 获取当前视角信息的方法
|
|
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,
|
|
setElectricalBoxClickCallback
|
|
});
|
|
|
|
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>
|