From fd1274d07f1e68ed28bdb08bd95e5bb27c4e2da1 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sun, 25 Jun 2023 14:24:23 +0800
Subject: [PATCH] git无法使用期间修改……
---
src/components/map/index.vue | 69 ++++++++++++++++++++++++++++------
1 files changed, 57 insertions(+), 12 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 3359a21..0c30baf 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 17:00:30
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-05-18 15:43:37
+ * @LastEditTime: 2023-05-30 10:15:14
* @FilePath: \srs-police-affairs\src\components\map\index.vue
* @Description: 公用地图组件
*
@@ -12,6 +12,14 @@
<div class="viewer-box" id="viewer-container" @click="showImgBtn = false">
<slot ref="mainContent" name="mainContent"></slot>
<slot name="showButton"></slot>
+
+ <div class="compass-btn">
+ <el-tooltip content="指北针" placement="top" effect="dark">
+ <i id="COMPASSBTN" class="el-icon-compass-btn" style="vertical-align: middle; cursor: pointer"
+ :style="{ transform: compassBtnTranslate }" @click="compassBtnClick"></i>
+ </el-tooltip>
+ </div>
+
<div class="over-look-btn">
<el-tooltip content="一键俯视" placement="top" effect="dark">
<i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i>
@@ -190,7 +198,8 @@
showImgBtn: false,
imgtype: 0,
tilesetLayerType: '',
- angleCheck: true
+ angleCheck: true,
+ compassBtnTranslate: 'rotate(0deg)'
}
},
@@ -217,6 +226,12 @@
preserveDrawingBuffer: true
}
}
+ })
+
+ global.viewer.scene.postRender.addEventListener(function () {
+ var heading = global.viewer.scene.camera.heading
+ var x = -global.DC.Namespace.Cesium.Math.toDegrees(heading)
+ that.compassBtnTranslate = "rotate(" + x + "deg)"
})
const curTools = createTools()
@@ -584,11 +599,40 @@
lat: curLatitude,
}
},
+ compassBtnClick () {
+ const degrees = global.viewer.camera.heading * (180 / Math.PI)
+ if (degrees == 360) {
+ return
+ }
+ const position = global.DC.Transform.transformCartesianToWGS84(global.viewer.camera.position)
+
+
+ global.viewer.camera.flyTo({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: global.DC.Transform.transformWGS84ToCartesian(new global.DC.Position(position.lng, position.lat, position.alt + 1000)),
+
+ orientation: {
+ // 指向
+ heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: global.viewer.camera.pitch,
+ roll: global.viewer.camera.roll
+ },
+ duration: 3
+ })
+ },
overLookClick () {
+ const degrees = global.viewer.camera.pitch * (180 / Math.PI)
+
+ if (degrees == -90) {
+ return
+ }
+
const position = this.getSceneCenterPosition(global.viewer)
- global.viewer.camera.setView({
+ global.viewer.camera.flyTo({
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -596,11 +640,12 @@
),
orientation: {
// 指向
- heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ heading: global.viewer.camera.heading,
// 视角
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0
- }
+ roll: global.viewer.camera.roll
+ },
+ duration: 3
})
},
@@ -839,12 +884,14 @@
document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')
document.querySelector('.screen-full-btn').classList.add('homebottom')
document.querySelector('.over-look-btn').classList.add('homebottom')
+ document.querySelector('.compass-btn').classList.add('homebottom')
document.querySelector('.image-switch-icon-btn').classList.add('iconbottom')
} else {
// if (!document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
document.querySelector('.dc-container .dc-zoom-controller').classList.remove('homebottom')
document.querySelector('.screen-full-btn').classList.remove('homebottom')
document.querySelector('.over-look-btn').classList.remove('homebottom')
+ document.querySelector('.compass-btn').classList.remove('homebottom')
document.querySelector('.image-switch-icon-btn').classList.remove('iconbottom')
}
@@ -963,11 +1010,9 @@
let pointElement
let labelElement
- let alt = params.alt || 2
-
if (type == "billboard") {
// pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
- pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.url)
+ pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.url)
pointElement.setStyle(params.setStyle)
pointElement.size = [32, 32]
pointElement.style = "clustering"
@@ -979,7 +1024,7 @@
pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove)
} else if (type == "label") {
// labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text)
- labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.text)
+ labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.text)
let fontColor = 'fontColor' in params ? params.fontColor : global.DC.Color.CRIMSON
let style = 'fontColor' in params ? global.DC.Namespace.Cesium.LabelStyle.FILL : global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE
labelElement.setStyle({
@@ -996,14 +1041,14 @@
labelElement.on(global.DC.MouseEventType.CLICK, incident)
} else if (type == "billboardOrLabel") {
// pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
- pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.url)
+ pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.url)
pointElement.size = [32, 32]
pointElement.attrParams = params
layersObjcect[layerName].addOverlay(pointElement)
pointElement.on(global.DC.MouseEventType.CLICK, incident)
// labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text)
- labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 4), params.text)
+ labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.text)
labelElement.setStyle({
fillColor: global.DC.Color.CRIMSON,
style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
--
Gitblit v1.9.3