|
@@ -10,11 +10,31 @@
|
|
|
<div class="main-layout" v-on:mouseover="changeActive('2D')" @mousemove="getMouseLocation">
|
|
|
<div id="2DcesiumContainer" class="map"></div>
|
|
|
</div>
|
|
|
+ <!-- <div class="bottom-rightbuttons">
|
|
|
+ <el-tooltip placement="left" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">测量</span>
|
|
|
+ <el-button icon="el-icon-files" circle @click="measurement($data._viewer2D,handler2D)" ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip placement="left" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">通视</span>
|
|
|
+ <el-button icon="el-icon-files" circle @click="throughSight($data._viewer2D,handler2D)" ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div> -->
|
|
|
</el-col>
|
|
|
<el-col style="height: 100%; position: relative" :span="24 - this.leftwidth">
|
|
|
<div class="main-layout" v-on:mouseover="changeActive('3D')" @mousemove="getMouseLocation">
|
|
|
<div id="3DcesiumContainer" class="map"></div>
|
|
|
</div>
|
|
|
+ <!-- <div class="bottom-rightbuttons">
|
|
|
+ <el-tooltip placement="left" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">测量</span>
|
|
|
+ <el-button icon="el-icon-files" circle @click="measurement($data._viewer3D,handler3D)" ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip placement="left" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">通视</span>
|
|
|
+ <el-button icon="el-icon-files" circle @click="throughSight($data._viewer3D,handler3D)" ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div> -->
|
|
|
</el-col>
|
|
|
<el-tabs type="border-card" v-model="panelName" tab-position="left" class="menu" :stretch="true"
|
|
|
@tab-click="legendClick">
|
|
@@ -133,15 +153,35 @@
|
|
|
</el-table>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
- <div class="topbuttons">
|
|
|
- <el-button icon="el-icon-full-screen" circle @click="ismax()"></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>
|
|
|
- <el-button icon="el-icon-close" circle @click="removeEntitys();"></el-button>
|
|
|
+ <div class="top-rightbuttons">
|
|
|
+ <el-tooltip placement="left" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">放大/缩小</span>
|
|
|
+ <el-button icon="el-icon-full-screen" circle @click="ismax()"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip placement="left" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">Home键</span>
|
|
|
+ <el-button icon="el-icon-house" circle @click="home()"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip placement="left" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">放大</span>
|
|
|
+ <el-button icon="el-icon-plus" circle @click="big()"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip placement="left" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">缩小</span>
|
|
|
+ <el-button icon="el-icon-minus" circle @click="small()"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip placement="left" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">模型移除</span>
|
|
|
+ <el-button icon="el-icon-close" circle @click="removeEntitys();"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="bottombuttons">
|
|
|
- <el-button icon="el-icon-download" circle @click="saveJson()" v-if="this.mode!=true"></el-button>
|
|
|
+ <div class="middle-rightbuttons">
|
|
|
+ <el-tooltip placement="left" effect="light" slot="label">
|
|
|
+ <span slot="content" class="item">想定保存</span>
|
|
|
+ <el-button icon="el-icon-download" circle @click="saveJson()" v-if="this.mode!=true"></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
</div>
|
|
|
</el-row>
|
|
|
<el-dialog title="结果" :visible.sync="dialogVisible" width="50%">
|
|
@@ -358,6 +398,14 @@ export default {
|
|
|
selectMissile:{
|
|
|
pos:{x:0,y:0,z:0}
|
|
|
},
|
|
|
+
|
|
|
+ measurementPosition: [], // 记录位置
|
|
|
+ poly: null, // 记录线
|
|
|
+ distance: 0, // 记录距离
|
|
|
+ cartesian: null, // 获取鼠标与地图的交点
|
|
|
+ labelPt: null, // 最终位置
|
|
|
+ options: null, //线段
|
|
|
+
|
|
|
redForm: {
|
|
|
name: '',
|
|
|
method: '',
|
|
@@ -514,6 +562,7 @@ export default {
|
|
|
},
|
|
|
xdName: {
|
|
|
handler: function (val, oldVal) {
|
|
|
+ this.$store.commit('app/setXDname',val);
|
|
|
this.$notify({
|
|
|
title: "提示",
|
|
|
message: "已选择想定文件:"+val,
|
|
@@ -649,8 +698,6 @@ export default {
|
|
|
})
|
|
|
.then((response) => {
|
|
|
console.log('response.data :>> ', response.data);
|
|
|
- // // 处理成功的响应
|
|
|
- // jsonData = response.data
|
|
|
this.xdName = response.data.xdname
|
|
|
blueunit = response.data.blueunit
|
|
|
redunit = response.data.redunit
|
|
@@ -1225,9 +1272,189 @@ export default {
|
|
|
this.$store.commit("app/setMouseLocation", { longitude, latitude });
|
|
|
} catch (error) {
|
|
|
// console.error(error);
|
|
|
- }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //测距
|
|
|
+ measurement(viewer,handler){
|
|
|
+ // 鼠标左键点击事件
|
|
|
+ handler.setInputAction((ele) => {
|
|
|
+ // 创建射线并获取交点
|
|
|
+ let ray = viewer.camera.getPickRay(ele.position)
|
|
|
+ this.cartesian = viewer.scene.globe.pick(ray, viewer.scene)
|
|
|
+ if (!Cesium.defined(this.cartesian)) return
|
|
|
+ if (this.measurementPosition.length === 0) {
|
|
|
+ this.measurementPosition.push(this.cartesian.clone())
|
|
|
+ }
|
|
|
+ this.measurementPosition.push(this.cartesian)
|
|
|
+ // 记录鼠标单击时的位置,异步计算贴地距离
|
|
|
+ this.labelPt = this.measurementPosition[this.measurementPosition.length - 1]
|
|
|
+ if (this.measurementPosition.length > 2) {
|
|
|
+ this.getSpaceDistance(this.measurementPosition,viewer)
|
|
|
+ } else if (this.measurementPosition.length == 2) {
|
|
|
+ //在三维场景中添加圆点
|
|
|
+ viewer.entities.add({
|
|
|
+ name: '_range',
|
|
|
+ id: "range",
|
|
|
+ position: this.labelPt,
|
|
|
+ point: {
|
|
|
+ pixelSize: 5,
|
|
|
+ color: Cesium.Color.RED,
|
|
|
+ outlineColor: Cesium.Color.WHITE,
|
|
|
+ outlineWidth: 2,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ text: '起 点',
|
|
|
+ font: 'normal 18px SimHei',
|
|
|
+ fillColor: Cesium.Color.ORANGE, // 文本颜色
|
|
|
+ backgroundColor: Cesium.Color.WHITE, // 背景色
|
|
|
+ style: Cesium.LabelStyle.FILL, // 文本样式,轮廓
|
|
|
+ outlineWidth: 2, // 轮廓宽度
|
|
|
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 圆点位置
|
|
|
+ horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 文本的位置
|
|
|
+ pixelOffset: new Cesium.Cartesian2(0, -10), // 文本偏移量,Cartesian2
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
|
|
+ // 鼠标移动事件
|
|
|
+ handler.setInputAction((ele) => {
|
|
|
+ let ray = viewer.camera.getPickRay(ele.endPosition)
|
|
|
+ this.cartesian = viewer.scene.globe.pick(ray, viewer.scene)
|
|
|
+ // 判断是否定义该对象
|
|
|
+ if (!Cesium.defined(this.cartesian)) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.measurementPosition.length >= 2) {
|
|
|
+ if (!Cesium.defined(this.poly)) {
|
|
|
+ // 移动时路径绘制
|
|
|
+ this.poly = new PolyLinePrimitive(this.measurementPosition)
|
|
|
+ } else {
|
|
|
+ this.measurementPosition.pop()
|
|
|
+ this.measurementPosition.push(this.cartesian)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
|
|
|
+ // 创建线
|
|
|
+ var PolyLinePrimitive = (() => {
|
|
|
+ function line (positions) {
|
|
|
+ this.options = {
|
|
|
+ name: '_range',
|
|
|
+ polyline: {
|
|
|
+ show: true,
|
|
|
+ positions: [],
|
|
|
+ material: Cesium.Color.CORNFLOWERBLUE,
|
|
|
+ width: 3,
|
|
|
+ clampToGround: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.positions = positions
|
|
|
+ function init(){};
|
|
|
+ }
|
|
|
+
|
|
|
+ line.prototype.init = () => {
|
|
|
+ var update = () => {
|
|
|
+ return this.positions
|
|
|
+ }
|
|
|
+ // 实时更改线的位置,更新线
|
|
|
+ this.options.polyline.positions = new Cesium.CallbackProperty(update, false)
|
|
|
+ viewer.entities.add(this.options)
|
|
|
+ }
|
|
|
+ return line
|
|
|
+ })()
|
|
|
+ //鼠标左键双击事件
|
|
|
+ handler.setInputAction((ele) => {
|
|
|
+ // 创建射线并获取交点
|
|
|
+ let ray = viewer.camera.getPickRay(ele.position);
|
|
|
+ this.cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
|
|
+ if (!Cesium.defined(this.cartesian))
|
|
|
+ return;
|
|
|
+ if (this.measurementPosition.length === 0) {
|
|
|
+ this.measurementPosition.push(this.cartesian.clone());
|
|
|
+ }
|
|
|
+ this.measurementPosition.push(this.cartesian);
|
|
|
+ // 记录鼠标单击时的节点位置,异步计算贴地距离
|
|
|
+ this.labelPt = this.measurementPosition[this.measurementPosition.length - 1];
|
|
|
+ if (this.measurementPosition.length > 2) {
|
|
|
+ this.getSpaceDistance(this.measurementPosition,viewer);
|
|
|
+ } else if (this.measurementPosition.length === 2) {
|
|
|
+ // 在三维场景中添加Label
|
|
|
+ viewer.entities.add({
|
|
|
+ name: '_range',
|
|
|
+ position: this.labelPt,
|
|
|
+ point: {
|
|
|
+ pixelSize: 5,
|
|
|
+ color: Cesium.Color.RED,
|
|
|
+ outlineColor: Cesium.Color.MINTCREAM,
|
|
|
+ outlineWidth: 2,
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ handler.destroy(); // 删除事件
|
|
|
+ handler = undefined;
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
|
|
|
|
|
+ },
|
|
|
+ //通视
|
|
|
+ throughSight(viewer){
|
|
|
|
|
|
+
|
|
|
+ },
|
|
|
+ // 两点距离计算函数
|
|
|
+ getSpaceDistance (positions,viewer){
|
|
|
+ // 只计算最后一截,与前面累加, 因鼠标移动和左键单击事件,最后两个坐标点重复
|
|
|
+ let i = positions.length - 3
|
|
|
+ // 根据经纬度获取弧度
|
|
|
+ let pointCartographic1 = Cesium.Cartographic.fromCartesian(positions[i])
|
|
|
+ let pointCartographic2 = Cesium.Cartographic.fromCartesian(positions[i + 1])
|
|
|
+ this.getTerrainDistance(pointCartographic1, pointCartographic2,viewer)
|
|
|
+ },
|
|
|
+ // 贴地距离计算函数
|
|
|
+ getTerrainDistance (poin1, poin2,viewer) {
|
|
|
+ var geodesic = new Cesium.EllipsoidGeodesic()
|
|
|
+ geodesic.setEndPoints(poin1, poin2)
|
|
|
+ var s = geodesic.surfaceDistance
|
|
|
+ var cartoPts = [poin1]
|
|
|
+ for (let i = 1000; i < s; i += 1000) {
|
|
|
+ var cartoPt = geodesic.interpolateUsingSurfaceDistance(i)
|
|
|
+ cartoPts.push(cartoPt)
|
|
|
+ }
|
|
|
+ cartoPts.push(poin2)
|
|
|
+ // 返回两点之间的距离
|
|
|
+ var promise = Cesium.sampleTerrain(viewer.terrainProvider, 2, cartoPts)
|
|
|
+
|
|
|
+ promise.then(function (updatedPositions) {
|
|
|
+ for (let i = 0; i < updatedPositions.length - 1; i++) {
|
|
|
+ var geoD = new Cesium.EllipsoidGeodesic()
|
|
|
+ geoD.setEndPoints(updatedPositions[i], updatedPositions[i + 1])
|
|
|
+ var innerS = geoD.surfaceDistance
|
|
|
+ innerS = Math.sqrt(Math.pow(innerS, 2) + Math.pow(updatedPositions[i + 1].height - updatedPositions[i].height, 2))
|
|
|
+ distance += innerS
|
|
|
+ }
|
|
|
+
|
|
|
+ // 在三维场景中添加 label
|
|
|
+ var textDisance = distance > 10000 ? (distance / 1000.0).toFixed(2) + '公里' : distance.toFixed(2) + '里'
|
|
|
+ viewer.entities.add({
|
|
|
+ name: '_range',
|
|
|
+ position: this.labelPt,
|
|
|
+ point: {
|
|
|
+ poixeSize: 4,
|
|
|
+ color: Cesium.Color.RED,
|
|
|
+ outlineColor: Cesium.Color.MINTCREAM,
|
|
|
+ outlineWidth: 2
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ text: textDisance,
|
|
|
+ font: '18px sans-serif',
|
|
|
+ fillColor: Cesium.Color.GOLD,
|
|
|
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
|
+ outLineWidth: 2,
|
|
|
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
+ pixelOffset: new Cesium.Cartesian2(0, -10)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(function(error) {
|
|
|
+ // handle error
|
|
|
+ });
|
|
|
},
|
|
|
/*根据camera高度近似计算当前层级*/
|
|
|
heightToZoom(height) {
|
|
@@ -2370,7 +2597,7 @@ export default {
|
|
|
margin-right: 0px !important;
|
|
|
}
|
|
|
|
|
|
-.topbuttons {
|
|
|
+.top-rightbuttons {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
@@ -2381,7 +2608,7 @@ export default {
|
|
|
top: 20px;
|
|
|
}
|
|
|
|
|
|
-.bottombuttons {
|
|
|
+.middle-rightbuttons {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
@@ -2391,7 +2618,16 @@ export default {
|
|
|
right: 20px;
|
|
|
top: 380px;
|
|
|
}
|
|
|
-
|
|
|
+.bottom-rightbuttons{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-items: center;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 20px;
|
|
|
+}
|
|
|
.image-title {
|
|
|
margin-top: 10px;
|
|
|
text-align: center;
|