|
|
|
|
@ -26,7 +26,7 @@
|
|
|
|
|
import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
|
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
|
import { getAppEnvConfig } from '@/utils/env';
|
|
|
|
|
const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
|
|
|
|
|
const { VITE_GLOB_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
|
|
|
|
|
|
|
|
|
|
const props = defineProps([
|
|
|
|
|
'allImageDataList',
|
|
|
|
|
@ -41,8 +41,6 @@
|
|
|
|
|
isAutoEditing: true,
|
|
|
|
|
});
|
|
|
|
|
// 地图照片
|
|
|
|
|
// 地图照片-地面点
|
|
|
|
|
// let bottomPointGraphicData: any = [];
|
|
|
|
|
// 地图照片-飞行点
|
|
|
|
|
let flightointGraphicData: any = [];
|
|
|
|
|
// 地图照片-地面点到展示图片的线
|
|
|
|
|
@ -283,7 +281,17 @@
|
|
|
|
|
map.addLayer(graphicLayers);
|
|
|
|
|
// 图层
|
|
|
|
|
showAllImageDataList();
|
|
|
|
|
handlerLocation([118.2958779, 35.1342553]);
|
|
|
|
|
let lngList = props.allImageDataList.map((item) => item.lng);
|
|
|
|
|
let latList = props.allImageDataList.map((item) => item.lat);
|
|
|
|
|
let maxLng = Math.max(...lngList);
|
|
|
|
|
let minLng = Math.min(...lngList);
|
|
|
|
|
let maxLat = Math.max(...latList);
|
|
|
|
|
let minLat = Math.min(...latList);
|
|
|
|
|
handlerLocation([(maxLng + minLng) / 2, (maxLat + minLat) / 2 - 0.002], {
|
|
|
|
|
height: 300,
|
|
|
|
|
heading: 0,
|
|
|
|
|
pitch: -45,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
@ -291,16 +299,6 @@
|
|
|
|
|
() => props.updateDisplayOrShowOnMapData,
|
|
|
|
|
(newValue) => {
|
|
|
|
|
if (newValue) {
|
|
|
|
|
// 地图照片-地面点
|
|
|
|
|
// bottomPointGraphicData.forEach((graphicLayer) => {
|
|
|
|
|
// if (graphicLayer.options.id == newValue.id + '_bottom') {
|
|
|
|
|
// if (newValue.showOnMap == 1) {
|
|
|
|
|
// graphicLayer.show = newValue.display == 1 ? true : false;
|
|
|
|
|
// } else {
|
|
|
|
|
// graphicLayers.removeGraphic(graphicLayer);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// 地图照片-飞行点
|
|
|
|
|
flightointGraphicData.forEach((graphicLayer) => {
|
|
|
|
|
if (graphicLayer.options.id == newValue.id + '_flight') {
|
|
|
|
|
@ -337,9 +335,6 @@
|
|
|
|
|
// 地图照片-初始化-遍历展示
|
|
|
|
|
const showAllImageDataList = async () => {
|
|
|
|
|
// 删除旧数据
|
|
|
|
|
// bottomPointGraphicData?.forEach((graphicLayer) => {
|
|
|
|
|
// graphicLayers.removeGraphic(graphicLayer);
|
|
|
|
|
// });
|
|
|
|
|
flightointGraphicData?.forEach((graphicLayer) => {
|
|
|
|
|
graphicLayers.removeGraphic(graphicLayer);
|
|
|
|
|
});
|
|
|
|
|
@ -350,258 +345,280 @@
|
|
|
|
|
graphicLayers.removeGraphic(graphicLayer);
|
|
|
|
|
});
|
|
|
|
|
// 图层数据
|
|
|
|
|
// bottomPointGraphicData = [];
|
|
|
|
|
flightointGraphicData = [];
|
|
|
|
|
bottomImagePolylineGraphicData = [];
|
|
|
|
|
imageGraphicData = [];
|
|
|
|
|
|
|
|
|
|
// 地图照片-遍历
|
|
|
|
|
let rotation = 0;
|
|
|
|
|
props.allImageDataList.forEach((item, index) => {
|
|
|
|
|
if (item.lng && item.lat && item.absoluteAltitude) {
|
|
|
|
|
const image = new Image();
|
|
|
|
|
image.crossOrigin = 'Anonymous';
|
|
|
|
|
if (item.minipic) {
|
|
|
|
|
image.src = VITE_MEDIALIBRARY_IMAGE_URL + item.minipic;
|
|
|
|
|
} else {
|
|
|
|
|
image.src =
|
|
|
|
|
'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
|
|
|
|
|
}
|
|
|
|
|
image.onload = () => {
|
|
|
|
|
// 创建Canvas元素
|
|
|
|
|
const canvas = document.createElement('canvas');
|
|
|
|
|
canvas.width = 34;
|
|
|
|
|
canvas.height = 29;
|
|
|
|
|
// 获取Canvas绘图上下文
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
ctx.fillStyle = 'white';
|
|
|
|
|
ctx?.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
// 在Canvas上绘制图片
|
|
|
|
|
ctx.drawImage(image, 2, 2, 30, 25);
|
|
|
|
|
// 将Canvas内容转换为图片的数据URL
|
|
|
|
|
const dataURL1 = canvas.toDataURL('image/png');
|
|
|
|
|
// 飞行方向标
|
|
|
|
|
const flightimage = new Image();
|
|
|
|
|
flightimage.crossOrigin = 'Anonymous';
|
|
|
|
|
flightimage.src = '/src/assets/images/flightoperation/mediaLibraryFlight.png';
|
|
|
|
|
flightimage.onload = () => {
|
|
|
|
|
let flightRotation = 0;
|
|
|
|
|
let flightMapRotation = 0;
|
|
|
|
|
// 地图照片-遍历
|
|
|
|
|
props.allImageDataList.forEach((item, index) => {
|
|
|
|
|
if (item.lng && item.lat && item.absoluteAltitude) {
|
|
|
|
|
const image = new Image();
|
|
|
|
|
image.crossOrigin = 'Anonymous';
|
|
|
|
|
if (item.minipic) {
|
|
|
|
|
image.src = VITE_GLOB_MEDIALIBRARY_IMAGE_URL + item.minipic;
|
|
|
|
|
} else {
|
|
|
|
|
image.src =
|
|
|
|
|
'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871';
|
|
|
|
|
}
|
|
|
|
|
image.onload = () => {
|
|
|
|
|
// 位置
|
|
|
|
|
let position = [
|
|
|
|
|
parseFloat(item.lng),
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
// 在Canvas上绘制图片（假设image变量已经定义并且是一个有效的Image对象）
|
|
|
|
|
ctx.drawImage(image, 2, 2, 30, 25);
|
|
|
|
|
// 设置边框颜色和宽度
|
|
|
|
|
ctx.strokeStyle = '#2d8cef'; // 蓝色边框
|
|
|
|
|
ctx.lineWidth = 1; // 边框宽度
|
|
|
|
|
// 绘制边框
|
|
|
|
|
ctx.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1); // 调整坐标和尺寸以适应边框宽度
|
|
|
|
|
// 将Canvas内容转换为图片的数据URL
|
|
|
|
|
const dataURL2 = canvas.toDataURL('image/png');
|
|
|
|
|
// 位置
|
|
|
|
|
let position = [
|
|
|
|
|
parseFloat(item.lng),
|
|
|
|
|
parseFloat(item.lat),
|
|
|
|
|
parseFloat(item.absoluteAltitude),
|
|
|
|
|
];
|
|
|
|
|
// 地形高度
|
|
|
|
|
mars3d.PointUtil.getSurfaceHeight(
|
|
|
|
|
map.scene,
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(position[0], position[1]),
|
|
|
|
|
).then((point) => {
|
|
|
|
|
// 地面点
|
|
|
|
|
// let bottomPointGraphic = new mars3d.graphic.BillboardEntity({
|
|
|
|
|
// id: item.id + '_bottom',
|
|
|
|
|
// position: [position[0], position[1], point.height],
|
|
|
|
|
// style: {
|
|
|
|
|
// image: '/src/assets/images/flightoperation/mediaLibraryPoint.png',
|
|
|
|
|
// clampToGround: true,
|
|
|
|
|
// scale: 1,
|
|
|
|
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
// },
|
|
|
|
|
// hasEdit: false,
|
|
|
|
|
// show: item.display == 1 ? true : false,
|
|
|
|
|
// });
|
|
|
|
|
if (index + 1 < props.allImageDataList.length) {
|
|
|
|
|
const afterItem = props.allImageDataList[index + 1];
|
|
|
|
|
let lng = afterItem.lng - item.lng;
|
|
|
|
|
let lat = afterItem.lat - item.lat;
|
|
|
|
|
let angleARad = Math.atan(lng / lat);
|
|
|
|
|
let angleA = (angleARad * 180) / Math.PI;
|
|
|
|
|
rotation = angleA;
|
|
|
|
|
}
|
|
|
|
|
// 飞行点
|
|
|
|
|
let flightointGraphic = new mars3d.graphic.BillboardEntity({
|
|
|
|
|
id: item.id + '_flight',
|
|
|
|
|
position: [position[0], position[1], position[2] * 2],
|
|
|
|
|
style: {
|
|
|
|
|
image: '/src/assets/images/flightoperation/mediaLibraryFlight.png',
|
|
|
|
|
clampToGround: false,
|
|
|
|
|
scale: 1,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
|
|
|
|
rotation: rotation,
|
|
|
|
|
},
|
|
|
|
|
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], position[2]),
|
|
|
|
|
],
|
|
|
|
|
style: {
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
width: 1, // 线宽
|
|
|
|
|
clampToGround: 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: [position[0], position[1], position[2]],
|
|
|
|
|
style: {
|
|
|
|
|
image: dataURL1,
|
|
|
|
|
clampToGround: false,
|
|
|
|
|
scale: 1,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
label: {
|
|
|
|
|
text: `${item.name}`,
|
|
|
|
|
font_size: 14,
|
|
|
|
|
color: '#2d8cf0',
|
|
|
|
|
outline: true,
|
|
|
|
|
outlineColor: '#ffffff',
|
|
|
|
|
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.1,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
// 图片
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 监听mouseout事件
|
|
|
|
|
imageGraphic.on(mars3d.EventType.mouseOut, function () {
|
|
|
|
|
if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
|
|
|
|
|
// 鼠标移出时恢复默认图片、图片恢复大小
|
|
|
|
|
imageGraphic.setStyle({
|
|
|
|
|
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();
|
|
|
|
|
|
|
|
|
|
// 设置图片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: {
|
|
|
|
|
color: '#ffffff',
|
|
|
|
|
width: 1, // 线宽
|
|
|
|
|
clampToGround: 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: [
|
|
|
|
|
position[0],
|
|
|
|
|
position[1],
|
|
|
|
|
point.height + (position[2] - point.height) / 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.BOTTOM,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
|
|
|
|
pixelOffset: [25, -5],
|
|
|
|
|
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], point.height),
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(position[0], position[1], position[2] * 2),
|
|
|
|
|
];
|
|
|
|
|
// 更新 PolylineEntity 的颜色
|
|
|
|
|
bottomImagePolylineGraphic.setStyle({
|
|
|
|
|
color: '#2d8cf0',
|
|
|
|
|
});
|
|
|
|
|
// 飞行点显示
|
|
|
|
|
flightointGraphic.show = true;
|
|
|
|
|
// 鼠标更改图片
|
|
|
|
|
imageGraphic.setStyle({
|
|
|
|
|
image: dataURL2,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
emits('setNowShowImageData', item);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 将地面点 添加到图层中
|
|
|
|
|
// graphicLayers.addGraphic(bottomPointGraphic);
|
|
|
|
|
// 将飞行点 添加到图层中
|
|
|
|
|
graphicLayers.addGraphic(flightointGraphic);
|
|
|
|
|
// 地面点到展示图片的线 添加到图层中
|
|
|
|
|
graphicLayers.addGraphic(bottomImagePolylineGraphic);
|
|
|
|
|
// 展示图片 添加到图层中
|
|
|
|
|
graphicLayers.addGraphic(imageGraphic);
|
|
|
|
|
// 数据
|
|
|
|
|
// bottomPointGraphicData.push(bottomPointGraphic);
|
|
|
|
|
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;
|
|
|
|
|
},
|
|
|
|
|
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,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 地面点到展示图片的线
|
|
|
|
|
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] * 2,
|
|
|
|
|
),
|
|
|
|
|
];
|
|
|
|
|
graphicLayer.setStyle({
|
|
|
|
|
color: '#2d8cf0',
|
|
|
|
|
// 监听mouseout事件
|
|
|
|
|
imageGraphic.on(mars3d.EventType.mouseOut, function () {
|
|
|
|
|
if (!props.nowShowImageData || props.nowShowImageData.id !== item.id) {
|
|
|
|
|
// 鼠标移出时恢复默认图片、图片恢复大小
|
|
|
|
|
imageGraphic.setStyle({
|
|
|
|
|
image: dataURL1,
|
|
|
|
|
scale: 1,
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 展示图片
|
|
|
|
|
imageGraphicData?.forEach((graphicLayer) => {
|
|
|
|
|
if (props.nowShowImageData.id + '_image' == graphicLayer.options.id) {
|
|
|
|
|
graphicLayer.setStyle({
|
|
|
|
|
image: graphicLayer.options.chooseImage,
|
|
|
|
|
// 监听点击事件
|
|
|
|
|
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]),
|
|
|
|
|
];
|
|
|
|
|
// 更新 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;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 地面点到展示图片的线
|
|
|
|
|
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,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 地图照片-恢复默认
|
|
|
|
|
@ -621,7 +638,11 @@
|
|
|
|
|
});
|
|
|
|
|
bottomImagePolylineGraphic.positions = [
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(defaultPosition[0], defaultPosition[1], surfaceHeight),
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(defaultPosition[0], defaultPosition[1], defaultPosition[2]),
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
defaultPosition[0],
|
|
|
|
|
defaultPosition[1],
|
|
|
|
|
surfaceHeight + (defaultPosition[2] - surfaceHeight) / 10,
|
|
|
|
|
),
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
// 展示图片
|
|
|
|
|
@ -663,7 +684,7 @@
|
|
|
|
|
Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
defaultPosition[0],
|
|
|
|
|
defaultPosition[1],
|
|
|
|
|
defaultPosition[2] * 2,
|
|
|
|
|
defaultPosition[2],
|
|
|
|
|
),
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
@ -675,6 +696,7 @@
|
|
|
|
|
let chooseImage = imageGraphic.options.chooseImage;
|
|
|
|
|
imageGraphic.setStyle({
|
|
|
|
|
image: chooseImage,
|
|
|
|
|
scale: 1.3,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
@ -685,9 +707,23 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 图斑定位
|
|
|
|
|
const handlerLocation = (lngLat) => {
|
|
|
|
|
const position = Cesium.Cartesian3.fromDegrees(lngLat[0], lngLat[1]);
|
|
|
|
|
map.flyToPoint(position);
|
|
|
|
|
const handlerLocation = (lngLat, options: any = {}) => {
|
|
|
|
|
const { height, heading, pitch } = options;
|
|
|
|
|
if (height) {
|
|
|
|
|
const destination = Cesium.Cartesian3.fromDegrees(lngLat[0], lngLat[1], height);
|
|
|
|
|
map.camera.flyTo({
|
|
|
|
|
destination: destination,
|
|
|
|
|
orientation: {
|
|
|
|
|
heading: Cesium.Math.toRadians(heading),
|
|
|
|
|
pitch: Cesium.Math.toRadians(pitch),
|
|
|
|
|
roll: 0.0,
|
|
|
|
|
},
|
|
|
|
|
duration: 1.0,
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
const position = Cesium.Cartesian3.fromDegrees(lngLat[0], lngLat[1], 150);
|
|
|
|
|
map.flyToPoint(position);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
|
|
