|
|
|
|
@ -352,13 +352,15 @@
|
|
|
|
|
// 飞行方向标
|
|
|
|
|
const flightimage = new Image();
|
|
|
|
|
flightimage.crossOrigin = 'Anonymous';
|
|
|
|
|
flightimage.src = '/src/assets/images/flightoperation/mediaLibraryFlight.png';
|
|
|
|
|
// flightimage.src = '/src/assets/images/flightoperation/mediaLibraryFlight.png';
|
|
|
|
|
flightimage.src = '/mediaLibrary/mediaLibraryFlight.png';
|
|
|
|
|
|
|
|
|
|
flightimage.onload = () => {
|
|
|
|
|
let flightRotation = 0;
|
|
|
|
|
let flightMapRotation = 0;
|
|
|
|
|
// 地图照片-遍历
|
|
|
|
|
props.allImageDataList.forEach((item, index) => {
|
|
|
|
|
if (item.lng && item.lat && item.absoluteAltitude) {
|
|
|
|
|
if (item.lng && item.lat && item.absoluteAltitude && item.relativeAltitude) {
|
|
|
|
|
const image = new Image();
|
|
|
|
|
image.crossOrigin = 'Anonymous';
|
|
|
|
|
if (item.minipic) {
|
|
|
|
|
@ -374,247 +376,256 @@
|
|
|
|
|
parseFloat(item.lat),
|
|
|
|
|
parseFloat(item.absoluteAltitude),
|
|
|
|
|
];
|
|
|
|
|
// 地形高度
|
|
|
|
|
mars3d.PointUtil.getSurfaceHeight(
|
|
|
|
|
map.scene,
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(position[0], position[1]),
|
|
|
|
|
).then((point) => {
|
|
|
|
|
// 创建Canvas元素
|
|
|
|
|
const canvas = document.createElement('canvas');
|
|
|
|
|
canvas.width = 34;
|
|
|
|
|
canvas.height = 29;
|
|
|
|
|
// 获取Canvas绘图上下文
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
ctx.fillStyle = '#ffffff00';
|
|
|
|
|
ctx?.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
// 地面点的绝对高度
|
|
|
|
|
let surfaceHeight = item.absoluteAltitude - item.relativeAltitude;
|
|
|
|
|
// 创建Canvas元素
|
|
|
|
|
const canvas = document.createElement('canvas');
|
|
|
|
|
canvas.width = 34;
|
|
|
|
|
canvas.height = 29;
|
|
|
|
|
// 获取Canvas绘图上下文
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
ctx.fillStyle = '#ffffff00';
|
|
|
|
|
ctx?.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
|
|
|
|
|
// 图片
|
|
|
|
|
ctx.save();
|
|
|
|
|
const centerX = canvas.width / 2;
|
|
|
|
|
const centerY = canvas.height / 2;
|
|
|
|
|
ctx.translate(centerX, centerY);
|
|
|
|
|
const angleInRadians = (Math.PI / 180) * (parseFloat(item.gimbalYawDegree) + 180); // 将角度转换为弧度
|
|
|
|
|
ctx.rotate(angleInRadians);
|
|
|
|
|
ctx.drawImage(image, 2 - centerX, 2 - centerY, 30, 25);
|
|
|
|
|
ctx.restore();
|
|
|
|
|
// 图片
|
|
|
|
|
ctx.save();
|
|
|
|
|
const centerX = canvas.width / 2;
|
|
|
|
|
const centerY = canvas.height / 2;
|
|
|
|
|
ctx.translate(centerX, centerY);
|
|
|
|
|
const angleInRadians = (Math.PI / 180) * (parseFloat(item.gimbalYawDegree) + 180); // 将角度转换为弧度
|
|
|
|
|
ctx.rotate(angleInRadians);
|
|
|
|
|
ctx.drawImage(image, 2 - centerX, 2 - centerY, 30, 25);
|
|
|
|
|
ctx.restore();
|
|
|
|
|
|
|
|
|
|
// 飞行标识-右上角
|
|
|
|
|
if (index + 1 < props.allImageDataList.length) {
|
|
|
|
|
const afterItem = props.allImageDataList[index + 1];
|
|
|
|
|
let dLng = afterItem.lng - item.lng;
|
|
|
|
|
let dLat = afterItem.lat - item.lat;
|
|
|
|
|
// 使用 atan2 自动处理象限和除零
|
|
|
|
|
let angleRad = Math.atan2(dLat, dLng);
|
|
|
|
|
let angleDeg = Cesium.Math.toDegrees(angleRad);
|
|
|
|
|
flightRotation = ((Math.PI / 180) * (90 - angleDeg + 360)) % 360;
|
|
|
|
|
flightMapRotation = ((Math.PI / 180) * (angleDeg + 270)) % 360;
|
|
|
|
|
}
|
|
|
|
|
ctx.save();
|
|
|
|
|
const imgWAndH = 15;
|
|
|
|
|
ctx.translate(18 + imgWAndH / 2, imgWAndH / 2);
|
|
|
|
|
ctx.rotate(flightRotation);
|
|
|
|
|
ctx.drawImage(flightimage, -imgWAndH / 2, -imgWAndH / 2, imgWAndH, imgWAndH);
|
|
|
|
|
ctx.restore();
|
|
|
|
|
// 飞行标识-右上角
|
|
|
|
|
if (index + 1 < props.allImageDataList.length) {
|
|
|
|
|
const afterItem = props.allImageDataList[index + 1];
|
|
|
|
|
let dLng = afterItem.lng - item.lng;
|
|
|
|
|
let dLat = afterItem.lat - item.lat;
|
|
|
|
|
// 使用 atan2 自动处理象限和除零
|
|
|
|
|
let angleRad = Math.atan2(dLat, dLng);
|
|
|
|
|
let angleDeg = Cesium.Math.toDegrees(angleRad);
|
|
|
|
|
flightRotation = ((Math.PI / 180) * (90 - angleDeg + 360)) % 360;
|
|
|
|
|
flightMapRotation = ((Math.PI / 180) * (angleDeg + 270)) % 360;
|
|
|
|
|
}
|
|
|
|
|
ctx.save();
|
|
|
|
|
const imgWAndH = 15;
|
|
|
|
|
ctx.translate(18 + imgWAndH / 2, imgWAndH / 2);
|
|
|
|
|
ctx.rotate(flightRotation);
|
|
|
|
|
ctx.drawImage(flightimage, -imgWAndH / 2, -imgWAndH / 2, imgWAndH, imgWAndH);
|
|
|
|
|
ctx.restore();
|
|
|
|
|
|
|
|
|
|
// 设置图片1的边框颜色和宽度
|
|
|
|
|
ctx.save();
|
|
|
|
|
ctx.strokeStyle = '#ffffff';
|
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
|
ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
|
|
|
|
|
const dataURL1 = canvas.toDataURL('image/png');
|
|
|
|
|
ctx.restore();
|
|
|
|
|
// 设置图片1的边框颜色和宽度
|
|
|
|
|
ctx.save();
|
|
|
|
|
ctx.strokeStyle = '#ffffff';
|
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
|
ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
|
|
|
|
|
const dataURL1 = canvas.toDataURL('image/png');
|
|
|
|
|
ctx.restore();
|
|
|
|
|
|
|
|
|
|
// 设置图片2的边框颜色和宽度
|
|
|
|
|
ctx.strokeStyle = '#2d8cef';
|
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
|
ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
|
|
|
|
|
const dataURL2 = canvas.toDataURL('image/png');
|
|
|
|
|
// 设置图片2的边框颜色和宽度
|
|
|
|
|
ctx.strokeStyle = '#2d8cef';
|
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
|
ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
|
|
|
|
|
const dataURL2 = canvas.toDataURL('image/png');
|
|
|
|
|
|
|
|
|
|
// 飞行点
|
|
|
|
|
let flightointGraphic = new mars3d.graphic.BillboardEntity({
|
|
|
|
|
id: item.id + '_flight',
|
|
|
|
|
position: [position[0], position[1], position[2]],
|
|
|
|
|
style: {
|
|
|
|
|
image: '/src/assets/images/flightoperation/mediaLibraryFlight.png',
|
|
|
|
|
clampToGround: false,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
|
|
|
|
rotation: flightMapRotation,
|
|
|
|
|
},
|
|
|
|
|
hasEdit: false,
|
|
|
|
|
show: false,
|
|
|
|
|
});
|
|
|
|
|
// 地面点到展示图片的线
|
|
|
|
|
let bottomImagePolylineGraphic = new mars3d.graphic.PolylineEntity({
|
|
|
|
|
id: item.id + '_polyline',
|
|
|
|
|
positions: [
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(position[0], position[1], point.height),
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
position[0],
|
|
|
|
|
position[1],
|
|
|
|
|
point.height + (position[2] - point.height) / 10,
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
style: {
|
|
|
|
|
// 飞行点
|
|
|
|
|
let flightointGraphic = new mars3d.graphic.BillboardEntity({
|
|
|
|
|
id: item.id + '_flight',
|
|
|
|
|
position: [position[0], position[1], position[2]],
|
|
|
|
|
style: {
|
|
|
|
|
image: '/mediaLibrary/mediaLibraryFlight.png',
|
|
|
|
|
clampToGround: false,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
|
|
|
|
rotation: flightMapRotation,
|
|
|
|
|
label: {
|
|
|
|
|
text: `拍摄高度: ${item.relativeAltitude}米`,
|
|
|
|
|
font_size: 16,
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
width: 1, // 线宽
|
|
|
|
|
clampToGround: false,
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineWidth: 4,
|
|
|
|
|
outlineColor: '#000000',
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.TOP,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
|
|
|
|
pixelOffset: [-10, -28],
|
|
|
|
|
// show: false,
|
|
|
|
|
},
|
|
|
|
|
hasEdit: false,
|
|
|
|
|
show: item.display == 1 ? true : false,
|
|
|
|
|
// 用于恢复默认
|
|
|
|
|
defaultPosition: position,
|
|
|
|
|
// 地形高度
|
|
|
|
|
surfaceHeight: point.height,
|
|
|
|
|
});
|
|
|
|
|
// 展示图片
|
|
|
|
|
let imageGraphic = new mars3d.graphic.BillboardEntity({
|
|
|
|
|
id: item.id + '_image',
|
|
|
|
|
position: [
|
|
|
|
|
},
|
|
|
|
|
hasEdit: false,
|
|
|
|
|
show: false,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 地面点到展示图片的线
|
|
|
|
|
let bottomImagePolylineGraphic = new mars3d.graphic.PolylineEntity({
|
|
|
|
|
id: item.id + '_polyline',
|
|
|
|
|
positions: [
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(position[0], position[1], surfaceHeight),
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
position[0],
|
|
|
|
|
position[1],
|
|
|
|
|
point.height + (position[2] - point.height) / 10,
|
|
|
|
|
],
|
|
|
|
|
style: {
|
|
|
|
|
surfaceHeight + item.relativeAltitude / 10,
|
|
|
|
|
),
|
|
|
|
|
],
|
|
|
|
|
style: {
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
width: 1, // 线宽
|
|
|
|
|
clampToGround: false,
|
|
|
|
|
},
|
|
|
|
|
hasEdit: false,
|
|
|
|
|
show: item.display == 1 ? true : false,
|
|
|
|
|
// 用于恢复默认
|
|
|
|
|
defaultPosition: position,
|
|
|
|
|
// 地面点的绝对高度
|
|
|
|
|
surfaceHeight: surfaceHeight,
|
|
|
|
|
});
|
|
|
|
|
// 展示图片
|
|
|
|
|
let imageGraphic = new mars3d.graphic.BillboardEntity({
|
|
|
|
|
id: item.id + '_image',
|
|
|
|
|
position: [
|
|
|
|
|
position[0],
|
|
|
|
|
position[1],
|
|
|
|
|
surfaceHeight + (position[2] - surfaceHeight) / 10,
|
|
|
|
|
],
|
|
|
|
|
style: {
|
|
|
|
|
image: dataURL1,
|
|
|
|
|
clampToGround: false,
|
|
|
|
|
scale: 1,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
label: {
|
|
|
|
|
text: `${item.name}`,
|
|
|
|
|
font_size: 16,
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineWidth: 4,
|
|
|
|
|
outlineColor: '#000000',
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.TOP,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
|
|
|
|
pixelOffset: [-20, -60],
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
hasEdit: false,
|
|
|
|
|
show: item.display == 1 ? true : false,
|
|
|
|
|
// 用于恢复默认
|
|
|
|
|
defaultImage: dataURL1,
|
|
|
|
|
// 用于外侧修改图片
|
|
|
|
|
chooseImage: dataURL2,
|
|
|
|
|
});
|
|
|
|
|
// 监听mouseover事件
|
|
|
|
|
imageGraphic.on(mars3d.EventType.mouseOver, function () {
|
|
|
|
|
if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
|
|
|
|
|
// 鼠标悬停时更改图片、图片变大
|
|
|
|
|
imageGraphic.setStyle({
|
|
|
|
|
image: dataURL2,
|
|
|
|
|
scale: 1.3,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 监听mouseout事件
|
|
|
|
|
imageGraphic.on(mars3d.EventType.mouseOut, function () {
|
|
|
|
|
if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
|
|
|
|
|
// 鼠标移出时恢复默认图片、图片恢复大小
|
|
|
|
|
imageGraphic.setStyle({
|
|
|
|
|
image: dataURL1,
|
|
|
|
|
clampToGround: false,
|
|
|
|
|
scale: 1,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
label: {
|
|
|
|
|
text: `${item.name}`,
|
|
|
|
|
font_size: 16,
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineWidth: 4,
|
|
|
|
|
outlineColor: '#000000',
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
|
|
|
|
pixelOffset: [25, -5],
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
hasEdit: false,
|
|
|
|
|
show: item.display == 1 ? true : false,
|
|
|
|
|
// 用于恢复默认
|
|
|
|
|
defaultImage: dataURL1,
|
|
|
|
|
// 用于外侧修改图片
|
|
|
|
|
chooseImage: dataURL2,
|
|
|
|
|
});
|
|
|
|
|
// 监听mouseover事件
|
|
|
|
|
imageGraphic.on(mars3d.EventType.mouseOver, function () {
|
|
|
|
|
if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
|
|
|
|
|
// 鼠标悬停时更改图片、图片变大
|
|
|
|
|
imageGraphic.setStyle({
|
|
|
|
|
image: dataURL2,
|
|
|
|
|
scale: 1.3,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 监听mouseout事件
|
|
|
|
|
imageGraphic.on(mars3d.EventType.mouseOut, function () {
|
|
|
|
|
if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
|
|
|
|
|
// 鼠标移出时恢复默认图片、图片恢复大小
|
|
|
|
|
imageGraphic.setStyle({
|
|
|
|
|
image: dataURL1,
|
|
|
|
|
scale: 1,
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 监听点击事件
|
|
|
|
|
imageGraphic.on(mars3d.EventType.click, function () {
|
|
|
|
|
// 点击当前展示的图片
|
|
|
|
|
// if (props.nowShowImageData && props.nowShowImageData.id == item.id) {
|
|
|
|
|
// // 全部恢复默认
|
|
|
|
|
// imageRestoreDefault();
|
|
|
|
|
// emits('setNowShowImageData', {});
|
|
|
|
|
// } else
|
|
|
|
|
if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
|
|
|
|
|
// 当前展示图片为空 或者 点击与当前展示不同
|
|
|
|
|
// 全部恢复默认
|
|
|
|
|
imageRestoreDefault();
|
|
|
|
|
// 鼠标点击
|
|
|
|
|
// 更新 PolylineEntity 的位置
|
|
|
|
|
bottomImagePolylineGraphic.positions = [
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(position[0], position[1], surfaceHeight),
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2]),
|
|
|
|
|
];
|
|
|
|
|
// 更新 PolylineEntity 的颜色
|
|
|
|
|
bottomImagePolylineGraphic.setStyle({
|
|
|
|
|
color: '#2d8cf0',
|
|
|
|
|
});
|
|
|
|
|
// 飞行点显示
|
|
|
|
|
flightointGraphic.show = true;
|
|
|
|
|
// 鼠标更改图片
|
|
|
|
|
imageGraphic.setStyle({
|
|
|
|
|
image: dataURL2,
|
|
|
|
|
scale: 1.3,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
emits('setNowShowImageData', item);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 将飞行点 添加到图层中
|
|
|
|
|
graphicLayers.addGraphic(flightointGraphic);
|
|
|
|
|
// 地面点到展示图片的线 添加到图层中
|
|
|
|
|
graphicLayers.addGraphic(bottomImagePolylineGraphic);
|
|
|
|
|
// 展示图片 添加到图层中
|
|
|
|
|
graphicLayers.addGraphic(imageGraphic);
|
|
|
|
|
// 数据
|
|
|
|
|
flightointGraphicData.push(flightointGraphic);
|
|
|
|
|
bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
|
|
|
|
|
imageGraphicData.push(imageGraphic);
|
|
|
|
|
|
|
|
|
|
// 初始选中
|
|
|
|
|
if (props.nowShowImageData && props.nowShowImageData.id) {
|
|
|
|
|
// 飞行点
|
|
|
|
|
flightointGraphicData?.forEach((graphicLayer) => {
|
|
|
|
|
if (props.nowShowImageData.id + '_flight' == graphicLayer.options.id) {
|
|
|
|
|
graphicLayer.show = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 监听点击事件
|
|
|
|
|
imageGraphic.on(mars3d.EventType.click, function () {
|
|
|
|
|
// 点击当前展示的图片
|
|
|
|
|
// if (props.nowShowImageData && props.nowShowImageData.id == item.id) {
|
|
|
|
|
// // 全部恢复默认
|
|
|
|
|
// imageRestoreDefault();
|
|
|
|
|
// emits('setNowShowImageData', {});
|
|
|
|
|
// } else
|
|
|
|
|
if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
|
|
|
|
|
// 当前展示图片为空 或者 点击与当前展示不同
|
|
|
|
|
// 全部恢复默认
|
|
|
|
|
imageRestoreDefault();
|
|
|
|
|
// 鼠标点击
|
|
|
|
|
// 更新 PolylineEntity 的位置
|
|
|
|
|
bottomImagePolylineGraphic.positions = [
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(position[0], position[1], point.height),
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2]),
|
|
|
|
|
// 地面点到展示图片的线
|
|
|
|
|
bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
|
|
|
|
|
if (props.nowShowImageData.id + '_polyline' == graphicLayer.options.id) {
|
|
|
|
|
let defaultPosition = graphicLayer.options.defaultPosition;
|
|
|
|
|
let surfaceHeight = graphicLayer.options.surfaceHeight;
|
|
|
|
|
graphicLayer.positions = [
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
defaultPosition[0],
|
|
|
|
|
defaultPosition[1],
|
|
|
|
|
surfaceHeight,
|
|
|
|
|
),
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
defaultPosition[0],
|
|
|
|
|
defaultPosition[1],
|
|
|
|
|
defaultPosition[2],
|
|
|
|
|
),
|
|
|
|
|
];
|
|
|
|
|
// 更新 PolylineEntity 的颜色
|
|
|
|
|
bottomImagePolylineGraphic.setStyle({
|
|
|
|
|
graphicLayer.setStyle({
|
|
|
|
|
color: '#2d8cf0',
|
|
|
|
|
});
|
|
|
|
|
// 飞行点显示
|
|
|
|
|
flightointGraphic.show = true;
|
|
|
|
|
// 鼠标更改图片
|
|
|
|
|
imageGraphic.setStyle({
|
|
|
|
|
image: dataURL2,
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 展示图片
|
|
|
|
|
imageGraphicData?.forEach((graphicLayer) => {
|
|
|
|
|
if (props.nowShowImageData.id + '_image' == graphicLayer.options.id) {
|
|
|
|
|
graphicLayer.setStyle({
|
|
|
|
|
image: graphicLayer.options.chooseImage,
|
|
|
|
|
scale: 1.3,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
emits('setNowShowImageData', item);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 将飞行点 添加到图层中
|
|
|
|
|
graphicLayers.addGraphic(flightointGraphic);
|
|
|
|
|
// 地面点到展示图片的线 添加到图层中
|
|
|
|
|
graphicLayers.addGraphic(bottomImagePolylineGraphic);
|
|
|
|
|
// 展示图片 添加到图层中
|
|
|
|
|
graphicLayers.addGraphic(imageGraphic);
|
|
|
|
|
// 数据
|
|
|
|
|
flightointGraphicData.push(flightointGraphic);
|
|
|
|
|
bottomImagePolylineGraphicData.push(bottomImagePolylineGraphic);
|
|
|
|
|
imageGraphicData.push(imageGraphic);
|
|
|
|
|
|
|
|
|
|
// 初始选中
|
|
|
|
|
if (props.nowShowImageData && props.nowShowImageData.id) {
|
|
|
|
|
// 飞行点
|
|
|
|
|
flightointGraphicData?.forEach((graphicLayer) => {
|
|
|
|
|
if (props.nowShowImageData.id + '_flight' == graphicLayer.options.id) {
|
|
|
|
|
graphicLayer.show = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 地面点到展示图片的线
|
|
|
|
|
bottomImagePolylineGraphicData?.forEach((graphicLayer) => {
|
|
|
|
|
if (props.nowShowImageData.id + '_polyline' == graphicLayer.options.id) {
|
|
|
|
|
let defaultPosition = graphicLayer.options.defaultPosition;
|
|
|
|
|
let surfaceHeight = graphicLayer.options.surfaceHeight;
|
|
|
|
|
graphicLayer.positions = [
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
defaultPosition[0],
|
|
|
|
|
defaultPosition[1],
|
|
|
|
|
surfaceHeight,
|
|
|
|
|
),
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
defaultPosition[0],
|
|
|
|
|
defaultPosition[1],
|
|
|
|
|
defaultPosition[2],
|
|
|
|
|
),
|
|
|
|
|
];
|
|
|
|
|
graphicLayer.setStyle({
|
|
|
|
|
color: '#2d8cf0',
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 展示图片
|
|
|
|
|
imageGraphicData?.forEach((graphicLayer) => {
|
|
|
|
|
if (props.nowShowImageData.id + '_image' == graphicLayer.options.id) {
|
|
|
|
|
graphicLayer.setStyle({
|
|
|
|
|
image: graphicLayer.options.chooseImage,
|
|
|
|
|
scale: 1.3,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
