|
|
|
@ -316,7 +316,6 @@ onMounted(async () => { |
|
|
|
}); |
|
|
|
const dataInfo = history.value ? history.value : await MapApi.getAllData() |
|
|
|
const shipData = props.shipDataList |
|
|
|
console.log('shipData', shipData) |
|
|
|
const shorePowerList = props.shorePowerList |
|
|
|
|
|
|
|
// const unitedData = |
|
|
|
@ -329,322 +328,6 @@ onMounted(async () => { |
|
|
|
arr4: [], |
|
|
|
arr5: [] |
|
|
|
} |
|
|
|
// 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 < 1) { |
|
|
|
// // 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%显示离线 |
|
|
|
// console.log(shorePowerList, itemShipInfo) |
|
|
|
// const x = itemShipInfo.shorePower.id; |
|
|
|
// const itemObj = shorePowerList.find(obj => obj.id === x); |
|
|
|
// const rand = Math.random(); |
|
|
|
// let statusImage = null; |
|
|
|
// if ([3, 4, 6].includes(itemObj.status)) { |
|
|
|
// // 50%概率：不显示状态图标 |
|
|
|
// statusImage = null; |
|
|
|
// } else if ([1, 2, 8].includes(itemObj.status)) { |
|
|
|
// // 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); |
|
|
|
@ -704,29 +387,29 @@ onMounted(async () => { |
|
|
|
backFaceCulling: true |
|
|
|
}, |
|
|
|
}); |
|
|
|
console.log(item.name) |
|
|
|
console.log('111111111') |
|
|
|
|
|
|
|
if (['国投-206#泊位-高压', '国投-207#泊位-高压', '国投-208#泊位-高压'].includes(item.name)) { |
|
|
|
console.log('2222222222') |
|
|
|
arr.arr1.push(xelectricalBoxModel) |
|
|
|
const status = item.storePowerStatus == '在⽤' ? 1 : 0 |
|
|
|
arr.arr1.push({ xelectricalBoxModel, status }) |
|
|
|
} |
|
|
|
if (['国投-209#泊位-高压', '国投-210#泊位-高压'].includes(item.name)) { |
|
|
|
arr.arr2.push(xelectricalBoxModel) |
|
|
|
const status = item.storePowerStatus == '在⽤' ? 1 : 0 |
|
|
|
arr.arr2.push({ xelectricalBoxModel, status }) |
|
|
|
} |
|
|
|
if (['国投-203#泊位-高压', '国投-204#泊位-高压', '国投-205#泊位-高压'].includes(item.name)) { |
|
|
|
arr.arr3.push(xelectricalBoxModel) |
|
|
|
const status = item.storePowerStatus == '在⽤' ? 1 : 0 |
|
|
|
arr.arr3.push({ xelectricalBoxModel, status }) |
|
|
|
} |
|
|
|
if (['华电-806#泊位-高压', '华电-807#泊位-高压'].includes(item.name)) { |
|
|
|
arr.arr4.push(xelectricalBoxModel) |
|
|
|
const status = item.storePowerStatus == '在⽤' ? 1 : 0 |
|
|
|
arr.arr4.push({ xelectricalBoxModel, status }) |
|
|
|
} |
|
|
|
if (['华电-808#泊位-高压', '华电-809#泊位-高压', '华电-810#泊位-高压'].includes(item.name)) { |
|
|
|
arr.arr5.push(xelectricalBoxModel) |
|
|
|
const status = item.storePowerStatus == '在⽤' ? 1 : 0 |
|
|
|
arr.arr5.push({ xelectricalBoxModel, status }) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
modelInstance.push({ |
|
|
|
model: xelectricalBoxModel, |
|
|
|
type: 'shorepower_box', |
|
|
|
@ -797,10 +480,8 @@ onMounted(async () => { |
|
|
|
labelInstance.push(xelectricalBoxLabel) |
|
|
|
}) |
|
|
|
shipData.forEach(item => { |
|
|
|
// console.log(dataInfo) |
|
|
|
|
|
|
|
const itemShipInfo = dataInfo.filter(shipItem => (item.shorePower.id === shipItem.parentId) && shipItem.type === 5) |
|
|
|
// console.log(itemShipInfo) |
|
|
|
const result = itemShipInfo |
|
|
|
.filter(item => { |
|
|
|
try { |
|
|
|
@ -813,7 +494,6 @@ onMounted(async () => { |
|
|
|
.map(item => JSON.parse(item.data)); |
|
|
|
if (!result || result.length === 0) return |
|
|
|
const dataObj = result[0] |
|
|
|
console.log(dataObj) |
|
|
|
let longitude, latitude; |
|
|
|
let wgsLon, wgsLat; |
|
|
|
const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]); |
|
|
|
@ -858,12 +538,12 @@ onMounted(async () => { |
|
|
|
statusImage = '/img/故障.png'; |
|
|
|
labelColor = Cesium.Color.YELLOW; // 超容时红色 |
|
|
|
} else { |
|
|
|
statusImage = '/img/未连接.png'; |
|
|
|
labelColor = Cesium.Color.RED; // 未连接或离线时红色 |
|
|
|
statusImage = '/img/故障.png'; |
|
|
|
labelColor = Cesium.Color.YELLOW; // 未连接或离线时红色 |
|
|
|
} |
|
|
|
if (item.applyInfo.reason !== 0) { |
|
|
|
statusImage = '/img/故障.png'; |
|
|
|
labelColor = Cesium.Color.YELLOW; |
|
|
|
statusImage = '/img/未连接.png'; |
|
|
|
labelColor = Cesium.Color.RED; |
|
|
|
} |
|
|
|
// 只有当需要显示状态图标时才添加实体 |
|
|
|
if (statusImage) { |
|
|
|
@ -916,22 +596,10 @@ onMounted(async () => { |
|
|
|
} : createPulsingLabel(item.shipBasicInfo.name, labelColor) |
|
|
|
}); |
|
|
|
labelInstance.push(xelectricalBoxLabel) |
|
|
|
|
|
|
|
|
|
|
|
/* if (!itemShipInfo) { |
|
|
|
return; |
|
|
|
} */ |
|
|
|
/* if (!itemShipInfo || itemShipInfo.length === 0) return |
|
|
|
const itemShipInfoObj = itemShipInfo[0] |
|
|
|
|
|
|
|
console.log('itemShipInfoObj', itemShipInfoObj) |
|
|
|
console.log('dataInfo', dataInfo) |
|
|
|
console.log('item', item) */ |
|
|
|
}) |
|
|
|
|
|
|
|
// 其他信息 |
|
|
|
dataInfo.forEach(item => { |
|
|
|
// console.log(item) |
|
|
|
if (['华能曹妃甸码头名字', '华电储运码头名字', '国投曹妃甸码头名字'].includes(item.name)) { |
|
|
|
const dataObj = JSON.parse(item.data) |
|
|
|
let longitude, latitude; |
|
|
|
@ -960,7 +628,6 @@ onMounted(async () => { |
|
|
|
} |
|
|
|
}) |
|
|
|
dataInfo.forEach(item => { |
|
|
|
// console.log(item) |
|
|
|
if (['港区'].includes(item.name)) { |
|
|
|
const dataObj = JSON.parse(item.data) |
|
|
|
let longitude, latitude; |
|
|
|
@ -1007,12 +674,13 @@ onMounted(async () => { |
|
|
|
] |
|
|
|
|
|
|
|
// 创建流动线材质 |
|
|
|
function createFlowMaterial() { |
|
|
|
function createFlowMaterial(status) { |
|
|
|
console.log(status) |
|
|
|
return new PolylineFlowMaterialProperty({ |
|
|
|
color: Cesium.Color.YELLOW, |
|
|
|
color: status ? Cesium.Color.LIME : Cesium.Color.YELLOW, |
|
|
|
duration: 5000, // 动画持续时间(毫秒) |
|
|
|
percent: 0.6, // 流动部分占整个线条的比例 |
|
|
|
gradient: 0.3 // 流动部分的渐变 |
|
|
|
percent: 1, // 流动部分占整个线条的比例 |
|
|
|
gradient: 1 // 流动部分的渐变 |
|
|
|
}); |
|
|
|
} |
|
|
|
function tempCreate(item) { |
|
|
|
@ -1090,7 +758,9 @@ onMounted(async () => { |
|
|
|
} |
|
|
|
}); |
|
|
|
// 创建连接线：将xelectricalBoxModel与arr中的每个实体连接 |
|
|
|
arr[`arr${index + 1}`].forEach((entity, idx) => { |
|
|
|
arr[`arr${index + 1}`].forEach((entityItem, idx) => { |
|
|
|
console.log(entityItem) |
|
|
|
const entity = entityItem.xelectricalBoxModel |
|
|
|
// 创建唯一的线实体ID |
|
|
|
const lineEntity = viewer.entities.add({ |
|
|
|
name: `connection_line_${idx}`, |
|
|
|
@ -1105,12 +775,11 @@ onMounted(async () => { |
|
|
|
return [mainPosition, targetPosition]; |
|
|
|
}, false), |
|
|
|
width: 3, |
|
|
|
material: createFlowMaterial(), |
|
|
|
material: createFlowMaterial(entityItem.status), |
|
|
|
// 启用深度测试，使线条能够被地形遮挡 |
|
|
|
enableDepthTest: true |
|
|
|
} |
|
|
|
}); |
|
|
|
console.log('lineEntity', lineEntity) |
|
|
|
}); |
|
|
|
|
|
|
|
}) |
|
|
|
@ -1121,11 +790,6 @@ onMounted(async () => { |
|
|
|
viewer.camera.flyTo(createView(presetViews.overview)); |
|
|
|
// 设置显示高度阈值 |
|
|
|
const SHOW_HEIGHT = 30000; // 高度 > 5000m 才显示模型等信息 |
|
|
|
// const targets = []; // 把需要控制的 entities push 进来 |
|
|
|
/* const targets = titleInstance |
|
|
|
.filter(item => item.modelInstance) |
|
|
|
.map(item => toRaw(item.modelInstance)); */ |
|
|
|
// console.log('targets', targets) |
|
|
|
viewer.camera.changed.addEventListener(() => { |
|
|
|
// 这个函数会在相机的任何属性发生变化后立即被调用。 |
|
|
|
const height = viewer.camera.positionCartographic.height; |
|
|
|
@ -1154,69 +818,6 @@ onMounted(async () => { |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 添加地图点击事件 |
|
|
|
/* 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() === 'shorepower_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); */ |
|
|
|
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); |
|
|
|
handler.setInputAction(function (movement) { |
|
|
|
const pickedObject = viewer.scene.pick(movement.position); |
|
|
|
|
