From 1690dbaf68c73ce716776cdd98992c8fad0226d2 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期五, 18 八月 2023 10:15:36 +0800
Subject: [PATCH] 资源管理添加预览功能
---
src/components/MapView/moonMap.vue | 317 +++++++++++++++++++++++++++++++++++-----------------
1 files changed, 212 insertions(+), 105 deletions(-)
diff --git a/src/components/MapView/moonMap.vue b/src/components/MapView/moonMap.vue
index 54344a4..b7186c9 100644
--- a/src/components/MapView/moonMap.vue
+++ b/src/components/MapView/moonMap.vue
@@ -1,8 +1,33 @@
<template>
- <div class="body_box">
- <div id="cesiumContainer"></div>
- <!-- <button id="btn1" class="layui-btn" @click="cameraInfo()">鐩告満鍙傛暟</button> -->
+
+ <div
+ id="cesiumContainer"
+ class="cesiumContainer"
+ >
+
+ <div class="mouseBox">
+ <div
+ class="earthImage"
+ :class="{ active: gridIsshow }"
+ ></div>
+ <div class="earthLable">缁忓害 :</div>
+ <div class="earthLable">{{ longitude }}</div>
+ <div class="earthLable">绾害 :</div>
+ <div class="earthLable">{{ latitude }}</div>
+ <div class="earthLable">鍦板舰楂樺害 :</div>
+ <div class="earthLable">{{ altHeight }} </div>
+ <div class="earthLable">绫�</div>
+ <div class="earthLable">瑙嗚楂樺害 :</div>
+ <div class="earthLable">{{ alt }} </div>
+ <div class="earthLable">鍗冪背</div>
+ <div class="earthLable">鍒嗚鲸鐜� :</div>
+ <div class="earthLable">{{ rate }}</div>
+ <div class="earthLable">m/px</div>
+ </div>
+
</div>
+ <!-- <button id="btn1" class="layui-btn" @click="cameraInfo()">鐩告満鍙傛暟</button> -->
+
</template>
<script>
@@ -13,85 +38,91 @@
return {
earthCtrl: null,
Viewer: null,
+ longitude: "0.00",
+ latitude: "0.00",
+ rate: "0.00",
+ alt: "0.00",
+ altHeight: '0.00',
+ gridIsshow: false
};
},
methods: {
- cameraInfo() {
- // 鑾峰彇褰撳墠鐩告満浣嶇疆鐨剎yz鍧愭爣
- var cameraPosition = Viewer.camera.position;
+ cameraInfo() {
+ // 鑾峰彇褰撳墠鐩告満浣嶇疆鐨剎yz鍧愭爣
+ var cameraPosition = Viewer.camera.position;
- // 鑾峰彇褰撳墠鐩告満鐨勫Э鎬侊紙heading銆乸itch銆乺oll锛�
- var cameraHeading = Viewer.camera.heading;
- var cameraPitch = Viewer.camera.pitch;
- var cameraRoll = Viewer.camera.roll;
+ // 鑾峰彇褰撳墠鐩告満鐨勫Э鎬侊紙heading銆乸itch銆乺oll锛�
+ var cameraHeading = Viewer.camera.heading;
+ var cameraPitch = Viewer.camera.pitch;
+ var cameraRoll = Viewer.camera.roll;
- // 鏋勫缓璀︽姤妗嗕腑鐨勬秷鎭�
- var message = 'Camera Position (x, y, z):\n' +
- cameraPosition.x.toFixed(2) + ', ' +
- cameraPosition.y.toFixed(2) + ', ' +
- cameraPosition.z.toFixed(2) + '\n\n' +
- 'Camera Heading: ' + cameraHeading.toFixed(2) + '\n' +
- 'Camera Pitch: ' + cameraPitch.toFixed(2) + '\n' +
- 'Camera Roll: ' + cameraRoll.toFixed(2);
+ // 鏋勫缓璀︽姤妗嗕腑鐨勬秷鎭�
+ var message = 'Camera Position (x, y, z):\n' +
+ cameraPosition.x.toFixed(2) + ', ' +
+ cameraPosition.y.toFixed(2) + ', ' +
+ cameraPosition.z.toFixed(2) + '\n\n' +
+ 'Camera Heading: ' + cameraHeading.toFixed(2) + '\n' +
+ 'Camera Pitch: ' + cameraPitch.toFixed(2) + '\n' +
+ 'Camera Roll: ' + cameraRoll.toFixed(2);
- // 寮瑰嚭璀︽姤妗嗘樉绀虹浉鏈轰綅缃拰濮挎��
- alert(message);
- },
+ // 寮瑰嚭璀︽姤妗嗘樉绀虹浉鏈轰綅缃拰濮挎��
+ alert(message);
+ },
// wmts鍔犺浇
AddWmtesLayer(url, id) {
- var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
- sourceType: "wmts",
- url: url,
- layer: "",
- format: "image/png",
- tileMatrixSetID: "GoogleCRS84Quad01",
- tileMatrixLabels: [
- "0",
- "1",
- "2",
- "3",
- "4",
- "5",
- "6",
- "7",
- "8",
- "9",
- "10",
- "11",
- "12",
- "13",
- "14",
- "15",
- "16",
- "17",
- "18",
- ],
- style: "",
- tilingScheme: new Cesium.GeographicTilingScheme({
- ellipsoid: Cesium.Ellipsoid.MOON,
- }),
- });
- console.log(urlTemplateImageryProvider);
- // this.layerList.push({
- // id: id,
- // layerData: urlTemplateImageryProvider._primitive,
- // type: "wmts",
- // });
- },
- // 鍦板舰鍔犺浇
+ var urlTemplateImageryProvider = earthCtrl.factory.createImageryLayer({
+ sourceType: "wmts",
+ url: url,
+ layer: "",
+ format: "image/png",
+ tileMatrixSetID: "GoogleCRS84Quad01",
+ tileMatrixLabels: [
+ "0",
+ "1",
+ "2",
+ "3",
+ "4",
+ "5",
+ "6",
+ "7",
+ "8",
+ "9",
+ "10",
+ "11",
+ "12",
+ "13",
+ "14",
+ "15",
+ "16",
+ "17",
+ "18",
+ ],
+ style: "",
+ tilingScheme: new Cesium.GeographicTilingScheme({
+ ellipsoid: Cesium.Ellipsoid.MOON,
+ }),
+ });
+ console.log(urlTemplateImageryProvider);
+ // this.layerList.push({
+ // id: id,
+ // layerData: urlTemplateImageryProvider._primitive,
+ // type: "wmts",
+ // });
+ },
+ // 鍦板舰鍔犺浇
AddDemLayer(url, id) {
- var terrain = new Cesium.CesiumTerrainProvider({
- url: url,
- // url: url,
- tilingScheme: new Cesium.GeographicTilingScheme({
- ellipsoid: Cesium.Ellipsoid.MOON,
- }),
- });
- window.Viewer.terrainProvider = terrain;
+ var terrain = new Cesium.CesiumTerrainProvider({
+ url: url,
+ // url: url,
+ tilingScheme: new Cesium.GeographicTilingScheme({
+ ellipsoid: Cesium.Ellipsoid.MOON,
+ }),
+ });
+ window.Viewer.terrainProvider = terrain;
- // let img_layer = Viewer.imageryLayers.addImageryProvider(layer);
- // this.layerList.push({ id: id, type: "dem" });
- },
+ // let img_layer = Viewer.imageryLayers.addImageryProvider(layer);
+ // this.layerList.push({ id: id, type: "dem" });
+ },
//鍦板浘鍒濆鍖�
init3DMap() {
//璁剧疆鏈堢悆鍧愭爣绯�
@@ -106,68 +137,144 @@
ellipsoidCoordinates: "MOON",
});
this.earthCtrl.environment.disableAllEffect();
-
this.Viewer = this.earthCtrl._Viewer;
-
- // this.Viewer.scene.skyAtmosphere.show = false;
-
+ this.Viewer.imageryLayers.removeAll();
this.Viewer.scene.globe.depthTestAgainstTerrain = false;
-
+ this.Viewer.scene.skyAtmosphere.show = false;
window.earthCtrl = this.earthCtrl;
-
window.Viewer = this.earthCtrl._Viewer;
-
window.Cesium = SmartEarth.Cesium;
-
window.sgworld = earthCtrl;
+
+
sgworld.Navigate.Stop(); //鍙栨秷椋炶鐘舵��
sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
sgworld.Navigate.setPosition(-1093596.38, 5729026.12, 4136590.41);
+ this.getLonLat();
var token = getToken();
- var demUrl = `${BASE_URL}/proxy/${token}/24`
- var wmtsUrl = `${BASE_URL}/proxy/${token}/17`
-
+ var demUrl = `${BASE_URL}/proxy/${token}/25`
+ var wmtsUrl = `${BASE_URL}/proxy/${token}/26`
this.AddDemLayer(demUrl)
this.AddWmtesLayer(wmtsUrl)
- //=======================
- // window.Viewer.imageryLayers.removeAll();
- //=======================
- // Viewer.scene.globe.showGroundAtmosphere = false;
+ },
+ getLonLat() {
+ let handlerPoint = new SmartEarth.Cesium.ScreenSpaceEventHandler(
+ window.Viewer.scene.canvas
+ );
+ var ellipsoid = window.Viewer.scene.globe.ellipsoid;
+ var that = this;
+ handlerPoint.setInputAction(function (movement) {
+ //鎹曡幏妞悆浣擄紝灏嗙瑳鍗″皵浜岀淮骞抽潰鍧愭爣杞负妞悆浣撶殑绗涘崱灏斾笁缁村潗鏍囷紝杩斿洖鐞冧綋琛ㄩ潰鐨勭偣
+ var cartesian = window.Viewer.camera.pickEllipsoid(
+ movement.endPosition,
+ ellipsoid
+ );
+ if (cartesian) {
+ //灏嗙瑳鍗″皵涓夌淮鍧愭爣杞负鍦板浘鍧愭爣锛堝姬搴︼級
+ var cartographic =
+ window.Viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
+ //灏嗗湴鍥惧潗鏍囷紙寮у害锛夎浆涓哄崄杩涘埗鐨勫害鏁�
+ that.longitude = SmartEarth.Cesium.Math.toDegrees(
+ cartographic.longitude
+ ).toFixed(6);
+ that.latitude = SmartEarth.Cesium.Math.toDegrees(
+ cartographic.latitude
+ ).toFixed(6);
+ that.altHeight = window.Viewer.scene.globe.getHeight(
+ Cesium.Cartographic.fromDegrees(that.longitude, that.latitude, 0)
+ )
+ if (that.altHeight) {
+ that.altHeight = that.altHeight.toFixed(6);
+ }
+ }
+ }, SmartEarth.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
- // var terrain = new Cesium.CesiumTerrainProvider({
- // url: config.moonTerrain,
- // tilingScheme: new Cesium.GeographicTilingScheme({
- // ellipsoid: Cesium.Ellipsoid.MOON,
- // }),
- // });
- // window.Viewer.terrainProvider = terrain;
-
+ Viewer.camera.changed.addEventListener(() => {
+ // 瑙嗛珮 km
+ let camera_alt = (Viewer.camera.positionCartographic.height / 1000).toFixed(
+ 2
+ );
+ that.alt = camera_alt;
+
+ let scene = window.Viewer.scene;
+ // 鑾峰彇鐢诲竷鐨勫ぇ灏�
+ var width = scene.canvas.clientWidth;
+ var height = scene.canvas.clientHeight;
+ //鑾峰彇鐢诲竷涓績涓や釜鍍忕礌鐨勫潗鏍囷紙榛樿鍦板浘娓叉煋鍦ㄧ敾甯冧腑蹇冧綅缃級
+ var left = scene.camera.getPickRay(
+ new SmartEarth.Cesium.Cartesian2((width / 2) | 0, (height - 1) / 2)
+ );
+ var right = scene.camera.getPickRay(
+ new SmartEarth.Cesium.Cartesian2((1 + width / 2) | 0, (height - 1) / 2)
+ );
+ var globe = scene.globe;
+ var leftPosition = globe.pick(left, scene);
+ var rightPosition = globe.pick(right, scene);
+ if (!Cesium.defined(leftPosition) || !Cesium.defined(rightPosition)) {
+ return;
+ }
+ var leftCartographic =
+ globe.ellipsoid.cartesianToCartographic(leftPosition);
+ var rightCartographic =
+ globe.ellipsoid.cartesianToCartographic(rightPosition);
+ var geodesic = new SmartEarth.Cesium.EllipsoidGeodesic();
+ geodesic.setEndPoints(leftCartographic, rightCartographic);
+ that.rate = geodesic.surfaceDistance.toFixed(6); //鍒嗚鲸鐜�
+ });
},
+
},
mounted() {
this.init3DMap();
},
- created() {},
+ created() { },
};
</script>
<style lang="less" scoped>
-.body_box {
+.cesiumContainer {
width: 100%;
height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- .cesiumContainer {
- width: 100%;
- height: 100%;
+
+ .mouseBox {
+ height: 30px;
+ background: rgba(1, 0, 28, 0.3);
+ z-index: 40;
+ position: absolute;
+ padding: 0px 10px;
+ bottom: 30px;
+ left: 20px;
+ display: flex;
+ align-items: center;
+ border-radius: 5px;
+ .earthImage {
+ width: 20px;
+ height: 20px;
+ background: url("../../assets/img/褰㈢姸 9.png") no-repeat;
+ background-size: 100% 100%;
+ cursor: pointer;
+ }
+ .earthLable {
+ font-size: 12px;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #ffffff;
+ line-height: 5px;
+ margin-left: 10px;
+ }
+ .active {
+ background-color: #171e2e;
+ border: 1px solid;
+ border-image: linear-gradient(47deg, #397bc9, #77a5cd, #397bc9) 1 1;
+ box-shadow: 0px 0px 6px 0px #080c13,
+ 0px 7px 8px 0px rgba(38, 47, 71, 0.68);
+ }
}
}
-
</style>
<style>
-.cesium-viewer-animationContainer{
+.cesium-viewer-animationContainer {
display: none !important;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3