|
|
@@ -1,6 +1,5 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- <div id="modeltooltip">左键单击确认</div>
|
|
|
<el-row style="height: 40px">
|
|
|
<div class="myHeader">
|
|
|
<el-button :type="this.dimension == 2 ? 'success' : 'danger'" @click="dimensionswitch(2)" round>二维</el-button>
|
|
|
@@ -10,15 +9,15 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</el-row>
|
|
|
- <el-row id="map" style="height: 790px; width: 100%; display: flex; position: relative">
|
|
|
+ <el-row id="earth" style="height: 790px; width: 100%; display: flex; position: relative">
|
|
|
<el-col style="height: 100%; position: relative" :span="this.leftwidth">
|
|
|
- <div class="main-layout" v-on:mouseover="changeActive('3D')">
|
|
|
- <div id="3DcesiumContainer" class="map"></div>
|
|
|
+ <div class="main-layout" v-on:mouseover="changeActive('2D')">
|
|
|
+ <div id="2DcesiumContainer" class="map" @click="onMapClick"></div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col style="height: 100%; position: relative" :span="24 - this.leftwidth">
|
|
|
- <div class="main-layout" v-on:mouseover="changeActive('2D')">
|
|
|
- <div id="2DcesiumContainer" class="map"></div>
|
|
|
+ <div class="main-layout" v-on:mouseover="changeActive('3D')">
|
|
|
+ <div id="3DcesiumContainer" class="map" @click="onMapClick"></div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-tabs
|
|
|
@@ -30,64 +29,29 @@
|
|
|
@tab-click="legendClick"
|
|
|
>
|
|
|
<el-tab-pane name="first">
|
|
|
- <span slot="label">
|
|
|
- <el-modeltooltip class="item" effect="dark" content="标绘" placement="left">
|
|
|
- <i class="el-icon-wind-power"></i>
|
|
|
- </el-modeltooltip>
|
|
|
- </span>
|
|
|
+ <el-tooltip placement="right" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">标绘</span>
|
|
|
+ <span><i class="el-icon-wind-power"></i></span>
|
|
|
+ </el-tooltip>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane name="second">
|
|
|
- <span slot="label">
|
|
|
- <el-modeltooltip class="item" effect="dark" content="模型" placement="left">
|
|
|
- <i class="el-icon-receiving"></i>
|
|
|
- </el-modeltooltip>
|
|
|
- </span>
|
|
|
- <el-radio-group v-model="whosmodel" style="margin: 0 auto" size="mini">
|
|
|
- <el-radio-button label="red">红方</el-radio-button>
|
|
|
- <el-radio-button label="blue">蓝方</el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- <div v-if="whosmodel == 'blue'" class="model">
|
|
|
- <div :class="{ active: this.modelType == 'ThadRocket' }" @click="selectmodel('ThadRocket')">
|
|
|
- <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
|
|
|
- <div style="text-align: center">Thad拦截导弹</div>
|
|
|
- </div>
|
|
|
- <div :class="{ active: this.modelType == 'interceptRadar' }" @click="selectmodel('interceptRadar')">
|
|
|
- <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
|
|
|
- <div style="text-align: center">拦截雷达</div>
|
|
|
- </div>
|
|
|
- <div :class="{ active: this.modelType == 'interceptSatellite' }" @click="selectmodel('interceptSatellite')">
|
|
|
- <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
|
|
|
- <div style="text-align: center">拦截卫星</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else class="model">
|
|
|
- <div :class="{ active: this.modelType == 'rocket' }" @click="selectmodel('rocket')">
|
|
|
- <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
|
|
|
- <div style="text-align: center">弹道导弹</div>
|
|
|
- </div>
|
|
|
- <div :class="{ active: this.modelType == 'radarTrap' }" @click="selectmodel('radarTrap')">
|
|
|
- <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
|
|
|
- <div style="text-align: center">雷达诱饵</div>
|
|
|
- </div>
|
|
|
- <div :class="{ active: this.modelType == 'GRradar' }" @click="selectmodel('GRradar')">
|
|
|
- <el-image style="width: 100px; height: 80px; margin: 0 auto" :src="url" fit="fill"></el-image>
|
|
|
- <div style="text-align: center">干扰雷达</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <el-tooltip placement="right" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">模型</span>
|
|
|
+ <span><i class="el-icon-receiving"></i></span>
|
|
|
+ </el-tooltip>
|
|
|
+ <Model @selectModel="selectModel" :isShow="isShow"></Model>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane name="third">
|
|
|
- <span slot="label">
|
|
|
- <el-modeltooltip class="item" effect="dark" content="测量" placement="left">
|
|
|
- <i class="el-icon-discount"></i>
|
|
|
- </el-modeltooltip>
|
|
|
- </span>
|
|
|
+ <el-tooltip placement="right" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">测量</span>
|
|
|
+ <span><i class="el-icon-discount"></i></span>
|
|
|
+ </el-tooltip>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane name="fouth">
|
|
|
- <span slot="label">
|
|
|
- <el-modeltooltip class="item" effect="dark" content="测想定" placement="left">
|
|
|
- <i class="el-icon-house"></i>
|
|
|
- </el-modeltooltip>
|
|
|
- </span>
|
|
|
+ <el-tooltip placement="right" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">测想定</span>
|
|
|
+ <span><i class="el-icon-house"></i></span>
|
|
|
+ </el-tooltip>
|
|
|
<el-table :data="situation">
|
|
|
<el-table-column label="名称" prop="xdname"></el-table-column>
|
|
|
<el-table-column label="操作">
|
|
|
@@ -101,13 +65,12 @@
|
|
|
</el-tabs>
|
|
|
<div class="buttons">
|
|
|
<el-button icon="el-icon-full-screen" circle @click="ismax()"></el-button>
|
|
|
- <!-- <el-button icon="el-icon-coin" circle></el-button> -->
|
|
|
- <!-- <el-button icon="el-icon-bangzhu" @click="Fly()" circle></el-button> -->
|
|
|
<el-button icon="el-icon-house" circle @click="home()"></el-button>
|
|
|
<el-button icon="el-icon-plus" circle @click="big()"></el-button>
|
|
|
<el-button icon="el-icon-minus" circle @click="small()"></el-button>
|
|
|
</div>
|
|
|
</el-row>
|
|
|
+ <div v-if="isShow" class="modeltooltip" ref="modeltooltip">{{ modeltooltip }}</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -115,8 +78,22 @@ import screenfull from "screenfull";
|
|
|
import fireController from "../../api/fireController";
|
|
|
import { getToken } from "@/utils";
|
|
|
import axios from "axios";
|
|
|
+import Model from "@/views/situation/Model";
|
|
|
export default {
|
|
|
- computed: {},
|
|
|
+ components: {
|
|
|
+ Model
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ leftwidth() {
|
|
|
+ if (this.dimension === 2) {
|
|
|
+ return 24;
|
|
|
+ } else if (this.dimension === 3) {
|
|
|
+ return 0;
|
|
|
+ } else if (this.dimension === 5) {
|
|
|
+ return 12;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
situation: [],
|
|
|
@@ -124,20 +101,26 @@ export default {
|
|
|
unit: [],
|
|
|
satellite: [],
|
|
|
center: [],
|
|
|
+ move_data:{},
|
|
|
viewer2D: null,
|
|
|
viewer3D: null,
|
|
|
- dimension: 3,
|
|
|
- leftwidth: 24,
|
|
|
+ dimension: 2,
|
|
|
mousevalue: null,
|
|
|
- shouldAnimate: false,
|
|
|
+ // 选中的点
|
|
|
+ selectedMarker: null,
|
|
|
+ // 以前的标记点坐标
|
|
|
+ oldPosition: null,
|
|
|
activeName: null,
|
|
|
currentLab: {
|
|
|
index: -1,
|
|
|
isActive: false
|
|
|
},
|
|
|
- whosmodel: "red",
|
|
|
- modelType: null,
|
|
|
- url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
+ url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
|
|
+ isShow: false,
|
|
|
+ handler3D: null,
|
|
|
+ handler2D: null,
|
|
|
+ image: null,
|
|
|
+ modeltooltip: null
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -145,6 +128,7 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
this.cesiumInit();
|
|
|
+ this.pointMove();
|
|
|
this.startWebSocket();
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
@@ -152,8 +136,8 @@ export default {
|
|
|
if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
|
|
|
this.websocket.close();
|
|
|
}
|
|
|
- },
|
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
|
startWebSocket(){
|
|
|
this.websocket = new WebSocket('ws://localhost:8765');
|
|
|
@@ -168,6 +152,7 @@ this.websocket.onmessage = (event) => {
|
|
|
const data = JSON.parse(event.data);
|
|
|
console.log('收到消息：', data);
|
|
|
|
|
|
+
|
|
|
// 在这里处理接收到的数据，更新Vue组件的数据等操作
|
|
|
};
|
|
|
|
|
|
@@ -191,19 +176,22 @@ this.websocket.onclose = () => {
|
|
|
// .then((res) => {
|
|
|
// console.log("update successfully ");
|
|
|
// });
|
|
|
- const requestData = row
|
|
|
- console.log('this.websocket :>> ', this.websocket);
|
|
|
- if(this.websocket && this.websocket.readyState === WebSocket.OPEN){
|
|
|
- this.websocket.send(JSON.stringify(requestData));
|
|
|
- }
|
|
|
- else{
|
|
|
- this.startWebSocket();
|
|
|
- setTimeout(() => {
|
|
|
- this.websocket.send(JSON.stringify(requestData));
|
|
|
- }, 2000); // 这里使用 setTimeout 来模拟耗时操作，2秒后执行回调
|
|
|
-
|
|
|
- }
|
|
|
+ // const requestData = row
|
|
|
+ // if(this.websocket && this.websocket.readyState === WebSocket.OPEN){
|
|
|
+ // this.websocket.send(JSON.stringify(requestData));
|
|
|
+ // }
|
|
|
+ // else{
|
|
|
+ // this.startWebSocket();
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.websocket.send(JSON.stringify(requestData));
|
|
|
+ // }, 2000);
|
|
|
+
|
|
|
+ // }
|
|
|
+ this.markLocation(120,20)
|
|
|
|
|
|
+ },
|
|
|
+ changeItemPosition(data){
|
|
|
+
|
|
|
},
|
|
|
async getJson(row) {
|
|
|
let redunit = [];
|
|
|
@@ -474,9 +462,8 @@ this.websocket.onclose = () => {
|
|
|
this.viewer2D.camera.changed.addEventListener(this.sync);
|
|
|
this.viewer3D.camera.percentageChanged = 0.01;
|
|
|
this.viewer3D.camera.changed.addEventListener(this.sync);
|
|
|
- },
|
|
|
- removeAllModel() {
|
|
|
- this.viewer.entities.removeAll(); // 移除全部模型
|
|
|
+ this.handler2D = new this.Cesium.ScreenSpaceEventHandler(this.viewer2D.scene.canvas);
|
|
|
+ this.handler3D = new this.Cesium.ScreenSpaceEventHandler(this.viewer3D.scene.canvas);
|
|
|
},
|
|
|
sync() {
|
|
|
if (this.mousevalue == "3D") {
|
|
|
@@ -485,10 +472,8 @@ this.websocket.onclose = () => {
|
|
|
Math.floor(this.viewer3D.canvas.clientWidth / 2),
|
|
|
Math.floor(this.viewer3D.canvas.clientHeight / 2)
|
|
|
);
|
|
|
-
|
|
|
// 转为世界坐标系
|
|
|
let position = this.viewer3D.scene.camera.pickEllipsoid(center);
|
|
|
- console.log(position);
|
|
|
// 判断中心点是否在椭球体上
|
|
|
if (this.Cesium.defined(position)) {
|
|
|
// 获取三维地图中心点与相机之间的距离
|
|
|
@@ -498,7 +483,6 @@ this.websocket.onclose = () => {
|
|
|
this.viewer2D.scene.camera.setView({
|
|
|
destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
|
|
|
});
|
|
|
- console.log(distance);
|
|
|
}
|
|
|
}
|
|
|
if (this.mousevalue == "2D") {
|
|
|
@@ -509,18 +493,15 @@ this.websocket.onclose = () => {
|
|
|
);
|
|
|
// 转为世界坐标系
|
|
|
let position = this.viewer2D.scene.camera.pickEllipsoid(center);
|
|
|
- console.log(position);
|
|
|
// 判断中心点是否在椭球体上
|
|
|
if (this.Cesium.defined(position)) {
|
|
|
// 获取三维地图中心点与相机之间的距离
|
|
|
let distance = this.viewer2D.scene.camera.positionCartographic.height;
|
|
|
-
|
|
|
position = this.convertWorldToCartographic(position);
|
|
|
// 更新三维地图
|
|
|
this.viewer3D.scene.camera.setView({
|
|
|
destination: new this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, distance)
|
|
|
});
|
|
|
- console.log(this.viewer2D.scene.camera.positionWC);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -536,17 +517,10 @@ this.websocket.onclose = () => {
|
|
|
// 监听地图变化
|
|
|
changeActive(value) {
|
|
|
this.mousevalue = value;
|
|
|
- console.log(value);
|
|
|
},
|
|
|
dimensionswitch(value) {
|
|
|
this.dimension = value;
|
|
|
- if (value == 3) {
|
|
|
- this.leftwidth = 24;
|
|
|
- } else if (value == 2) {
|
|
|
- this.leftwidth = 0;
|
|
|
- } else {
|
|
|
- this.leftwidth = 12;
|
|
|
- }
|
|
|
+ this.selectModel();
|
|
|
},
|
|
|
// 全屏缩小
|
|
|
ismax() {
|
|
|
@@ -599,85 +573,176 @@ this.websocket.onclose = () => {
|
|
|
duration: 2.0
|
|
|
});
|
|
|
},
|
|
|
- Fly() {
|
|
|
- this.shouldAnimate = !this.shouldAnimate;
|
|
|
- this.viewer2D.clock.shouldAnimate = true;
|
|
|
- this.viewer3D.clock.shouldAnimate = true;
|
|
|
- if (this.shouldAnimate == true) {
|
|
|
- this.startRun({ multiplier: 2000 });
|
|
|
- } else {
|
|
|
- this.stopRun();
|
|
|
+ // tabs 切换点击
|
|
|
+ legendClick({ index }) {
|
|
|
+ this.selectModel();
|
|
|
+ let tab_content = document.querySelectorAll(".menu .el-tabs__content");
|
|
|
+ if (this.currentLab.index == index) {
|
|
|
+ tab_content[0].style.display == "none" || ""
|
|
|
+ ? (tab_content[0].style.display = "block")
|
|
|
+ : (tab_content[0].style.display = "none");
|
|
|
}
|
|
|
- },
|
|
|
- startRun(option = { multiplier: 1 }) {
|
|
|
- // 监听每次渲染前执行矩阵求解
|
|
|
- this.viewer3D.scene.postUpdate.addEventListener(this.rotateSetting);
|
|
|
- // 根据option修改一些参数
|
|
|
- if (this.viewer3D.clock) {
|
|
|
- const keys = Object.keys(option);
|
|
|
- for (let k of keys) {
|
|
|
- this.viewer3D.clock[k] = option[k];
|
|
|
- }
|
|
|
+ if (this.currentLab.index != index) {
|
|
|
+ this.currentLab.index = index;
|
|
|
+ tab_content[0].style.display = "block";
|
|
|
}
|
|
|
},
|
|
|
- stopRun() {
|
|
|
- let viewer = this.viewer3D;
|
|
|
- viewer.clock.multiplier = 1;
|
|
|
- viewer.scene.postUpdate.removeEventListener(this.rotateSetting);
|
|
|
- },
|
|
|
- rotateSetting() {
|
|
|
- let Cesium = this.Cesium;
|
|
|
- let viewer = this.viewer3D;
|
|
|
- if (!viewer || viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
|
|
|
- return;
|
|
|
- }
|
|
|
- const icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(viewer.clock.currentTime);
|
|
|
- // icrfToFixed 在上面的方法中，若没加载好所需的计算资源会返回undefined，判断下
|
|
|
- if (Cesium.defined(icrfToFixed)) {
|
|
|
- const camera = viewer.camera;
|
|
|
- const offset = Cesium.Cartesian3.clone(camera.position);
|
|
|
- const transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
|
|
|
- camera.lookAtTransform(transform, offset);
|
|
|
+ mouseMove(event) {
|
|
|
+ if (this.$refs.modeltooltip) {
|
|
|
+ this.$refs.modeltooltip.style.left = event.pageX - 240 + "px";
|
|
|
+ this.$refs.modeltooltip.style.top = event.pageY - 115 + "px";
|
|
|
}
|
|
|
},
|
|
|
- /// / tabs 切换点击
|
|
|
- legendClick(tab, event) {
|
|
|
- var tab_content = document.querySelectorAll(".menu .el-tabs__content");
|
|
|
- if (this.currentLab.index == tab.index) {
|
|
|
- tab_content[0].style.display == "none" || ""
|
|
|
- ? (tab_content[0].style.display = "block")
|
|
|
- : (tab_content[0].style.display = "none");
|
|
|
+ selectModel(cursorStyle, image, info) {
|
|
|
+ console.log('image :>> ', image);
|
|
|
+ let earthMap = document.getElementById("earth");
|
|
|
+ earthMap.style.cursor = cursorStyle || "auto";
|
|
|
+ if (cursorStyle) {
|
|
|
+ document.addEventListener("mousemove", this.mouseMove);
|
|
|
+ this.isShow = true;
|
|
|
+ this.image = image;
|
|
|
+ this.modeltooltip = info;
|
|
|
+ } else {
|
|
|
+ document.removeEventListener("mousemove", this.mouseMove);
|
|
|
+ this.isShow = false;
|
|
|
+ this.image = null;
|
|
|
+ this.modeltooltip = null;
|
|
|
}
|
|
|
- if (this.currentLab.index != tab.index) {
|
|
|
- this.currentLab.index = tab.index;
|
|
|
- tab_content[0].style.display = "block";
|
|
|
+ },
|
|
|
+ onMapClick(event) {
|
|
|
+ if (this.isShow && this.modeltooltip === "左键单击确认") {
|
|
|
+ const { latitude, longitude } = this.getCoordinatesFromEvent(event);
|
|
|
+ this.markLocation(latitude, longitude);
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- selectmodel(modelType) {
|
|
|
- if (this.modelType == modelType) {
|
|
|
- this.modelType == null;
|
|
|
+ // 同时在2D和3D地图上标记坐标
|
|
|
+ markLocation(latitude, longitude) {
|
|
|
+ const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude);
|
|
|
+ this.viewer2D.entities.add({
|
|
|
+ position: position,
|
|
|
+ point: {
|
|
|
+ pixelSize: 12, // 调整点的大小，可以增大点的像素大小
|
|
|
+ color: this.Cesium.Color.fromCssColorString(this.image.color)
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ text: this.image.name,
|
|
|
+ show: true,
|
|
|
+ font: "18px Helvetica", // 调整标签的字体样式和大小
|
|
|
+ pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.viewer3D.entities.add({
|
|
|
+ position: position,
|
|
|
+ point: {
|
|
|
+ pixelSize: 12, // 调整点的大小，可以增大点的像素大小
|
|
|
+ color: this.Cesium.Color.fromCssColorString(this.image.color)
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ text: this.image.name,
|
|
|
+ show: true,
|
|
|
+ font: "18px Helvetica", // 调整标签的字体样式和大小
|
|
|
+ pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 从鼠标点击事件获取坐标
|
|
|
+ getCoordinatesFromEvent(event) {
|
|
|
+ let viewer = this.mousevalue === "2D" ? this.viewer2D : this.viewer3D;
|
|
|
+ let clickPosition;
|
|
|
+ if (this.dimension === 5 && this.mousevalue === "3D") {
|
|
|
+ clickPosition = new this.Cesium.Cartesian2(event.clientX - 1080, event.clientY - 160);
|
|
|
} else {
|
|
|
- this.modelType = modelType;
|
|
|
- var map = document.getElementById("map");
|
|
|
- map.style.cursor = "crosshair";
|
|
|
- document.addEventListener("mousemove", function (event) {
|
|
|
- var modeltooltip = document.getElementById("modeltooltip");
|
|
|
- modeltooltip.style.display = "block";
|
|
|
- modeltooltip.style.left = event.clientX - 180 + "px";
|
|
|
- modeltooltip.style.top = event.clientY - 100 + "px";
|
|
|
- });
|
|
|
-
|
|
|
- document.addEventListener("mouseout", function () {
|
|
|
- var modeltooltip = document.getElementById("modeltooltip");
|
|
|
- modeltooltip.style.display = "none";
|
|
|
- });
|
|
|
+ clickPosition = new this.Cesium.Cartesian2(event.clientX - 280, event.clientY - 160);
|
|
|
}
|
|
|
+ // 获取地图上的经纬度
|
|
|
+ const viewerPosition = viewer.scene.camera.pickEllipsoid(clickPosition);
|
|
|
+ const cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(viewerPosition);
|
|
|
+ const latitude = this.Cesium.Math.toDegrees(cartographic.latitude);
|
|
|
+ const longitude = this.Cesium.Math.toDegrees(cartographic.longitude);
|
|
|
+ return {
|
|
|
+ latitude,
|
|
|
+ longitude
|
|
|
+ };
|
|
|
+ },
|
|
|
+ markLine(point1, point2, color) {
|
|
|
+ // 从点1和点2的WGS84坐标创建Cartesian3对象
|
|
|
+ const position1 = this.Cesium.Cartesian3.fromDegrees(point1.longitude, point1.latitude, point1.height || 0);
|
|
|
+ const position2 = this.Cesium.Cartesian3.fromDegrees(point2.longitude, point2.latitude, point2.height || 0);
|
|
|
+ // 创建一个带有箭头图标的PolylineMaterial
|
|
|
+ const material = new this.Cesium.PolylineArrowMaterialProperty(
|
|
|
+ this.Cesium.Color.fromCssColorString(color || "red")
|
|
|
+ );
|
|
|
+
|
|
|
+ // 将点1和点2之间的连线添加到Viewer中
|
|
|
+ this.viewer2D.entities.add({
|
|
|
+ polyline: {
|
|
|
+ positions: [position1, position2],
|
|
|
+ width: 5, // 设置线的宽度
|
|
|
+ material: material,
|
|
|
+ followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.viewer3D.entities.add({
|
|
|
+ polyline: {
|
|
|
+ positions: [position1, position2],
|
|
|
+ width: 5, // 设置线的宽度
|
|
|
+ material: material,
|
|
|
+ followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 鼠标点击的事件监听
|
|
|
+ pointMove() {
|
|
|
+ // 监听鼠标左键点击事件
|
|
|
+ this.handler2D.setInputAction((event) => {
|
|
|
+ if (!this.selectedMarker && !this.modeltooltip) {
|
|
|
+ const screenPosition = new this.Cesium.Cartesian2(event.position.x, event.position.y);
|
|
|
+ const pickedEntity = this.viewer2D.scene.pick(screenPosition);
|
|
|
+ if (this.Cesium.defined(pickedEntity)) {
|
|
|
+ for (const entity of this.viewer2D.entities.values) {
|
|
|
+ if (pickedEntity.id.id === entity.id) {
|
|
|
+ this.selectedMarker = entity;
|
|
|
+ console.log(this.selectedMarker.id);
|
|
|
+ this.oldPosition = pickedEntity.id.position;
|
|
|
+ // 显示提示
|
|
|
+ this.selectModel("pointer", null, "右键取消");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (this.selectedMarker && this.modeltooltip === "右键取消") {
|
|
|
+ this.selectedMarker = null;
|
|
|
+ this.selectModel();
|
|
|
+ }
|
|
|
+ }, this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
|
+ // 监听鼠标移动事件，用于移动标记点
|
|
|
+ this.handler2D.setInputAction((event) => {
|
|
|
+ if (this.selectedMarker && this.modeltooltip === "右键取消") {
|
|
|
+ const screenPosition = new this.Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
|
|
|
+ const position = this.viewer2D.scene.camera.pickEllipsoid(screenPosition);
|
|
|
+ this.viewer2D.entities.getById(this.selectedMarker.id).position = position;
|
|
|
+ }
|
|
|
+ }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
+ // 监听右键
|
|
|
+ this.handler2D.setInputAction((event) => {
|
|
|
+ if (this.selectedMarker && this.modeltooltip === "右键取消") {
|
|
|
+ this.viewer2D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
|
|
|
+ this.selectedMarker = null;
|
|
|
+ this.selectModel();
|
|
|
+ }
|
|
|
+ }, this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
+.modeltooltip {
|
|
|
+ position: absolute;
|
|
|
+ padding: 5px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
.myHeader {
|
|
|
background-color: #1c222b !important;
|
|
|
color: #fff;
|
|
|
@@ -698,7 +763,7 @@ this.websocket.onclose = () => {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
-/deep/ .el-card__body {
|
|
|
+::v-deep .el-card__body {
|
|
|
height: 100% !important;
|
|
|
padding: 0px !important;
|
|
|
}
|
|
|
@@ -708,10 +773,6 @@ this.websocket.onclose = () => {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
-.container {
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
.map {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -725,7 +786,7 @@ this.websocket.onclose = () => {
|
|
|
top: 20px;
|
|
|
}
|
|
|
|
|
|
-/deep/.el-tabs--left .el-tabs__header.is-left {
|
|
|
+::v-deep .el-tabs--left .el-tabs__header.is-left {
|
|
|
margin-right: 0px !important;
|
|
|
}
|
|
|
|
|
|
@@ -743,7 +804,7 @@ this.websocket.onclose = () => {
|
|
|
margin: 5px !important;
|
|
|
}
|
|
|
|
|
|
-/deep/.el-tabs--border-card > .el-tabs__content {
|
|
|
+::v-deep .el-tabs--border-card > .el-tabs__content {
|
|
|
width: 300px;
|
|
|
display: none;
|
|
|
}
|
|
|
@@ -776,18 +837,13 @@ this.websocket.onclose = () => {
|
|
|
display: block !important;
|
|
|
}
|
|
|
|
|
|
-/deep/ .el-image .el-image__inner {
|
|
|
+::v-deep .el-image .el-image__inner {
|
|
|
border: 1px solid #ddd;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
-#modeltooltip {
|
|
|
- position: absolute;
|
|
|
- display: none;
|
|
|
- padding: 5px;
|
|
|
- color: #fff;
|
|
|
- font-size: 20px;
|
|
|
- pointer-events: none;
|
|
|
- z-index: 999;
|
|
|
+.item {
|
|
|
+ font-size: 14px;
|
|
|
+ /* right: 20px; */
|
|
|
}
|
|
|
</style>
|
