From 1e34e93edad2c7ceb099003c043d3eb6a9f77134 Mon Sep 17 00:00:00 2001 From: duxiaoning <17621883433@163.com> Date: Tue, 31 Dec 2024 13:04:34 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=AB=98=E7=A8=8B=E4=BB=A5?= =?UTF-8?q?=E5=8F=8A=E4=BA=8C=E4=B8=89=E7=BB=B4=E5=9C=BA=E6=99=AF=E5=88=87?= =?UTF-8?q?=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/productInfo/index.vue | 38 ++++++------ src/lib/cesiumUtils.js | 85 +++++++++++++++------------ src/views/Daichuli/Feedback/index.vue | 14 +++-- 3 files changed, 75 insertions(+), 62 deletions(-) diff --git a/src/components/productInfo/index.vue b/src/components/productInfo/index.vue index f112f84..9217e1e 100644 --- a/src/components/productInfo/index.vue +++ b/src/components/productInfo/index.vue @@ -1,18 +1,11 @@ @@ -24,6 +17,7 @@ export default { return { prodChecked: true, sampleChecked: true, + demChecked: false, }; }, methods: { @@ -41,6 +35,13 @@ export default { this.$emit("removeSample"); } }, + demCheckChanged() { + if (this.demChecked) { + this.$emit("addDemLayer"); + } else { + this.$emit("removeDemLayer"); + } + }, }, }; @@ -56,18 +57,15 @@ export default { z-index: 999; border-radius: 4px; } -.iconbox div { - width: 160px; - height: 75px; - border-radius: 5px; -} + .box { - height: 55px; width: 160px; background-color: white; - margin-left: 3px; border-radius: 5px; align-items: center; - padding: 10px 15px; +} + +.ckBox { + margin-left: 10px; } diff --git a/src/lib/cesiumUtils.js b/src/lib/cesiumUtils.js index d33ed0b..72139fa 100644 --- a/src/lib/cesiumUtils.js +++ b/src/lib/cesiumUtils.js @@ -19,7 +19,7 @@ class CesiumUtils { timeline: false, //时间线,默认true navigationHelpButton: false, //导航帮助说明,默认true // sceneMode:Cesium.SceneMode.SCENE2D, - sceneModePicker: false, //是否显示投影方式控件 + // sceneModePicker: false, //是否显示投影方式控件 infoBox: false, //点击要素之后显示的信息,默认true fullscreenButton: false, //全屏按钮,默认显示true navigationInstructionsInitiallyVisible: false, @@ -75,7 +75,16 @@ class CesiumUtils { // console.log('CesiumNavigation:', CesiumNavigation); CesiumNavigation(viewer, optionsNav); } - + // 添加高程数据 + static addDemLayer() { + this.viewer.scene.terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({ + url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer" + }); + } + // 移除高程数据 + static removeDemLayer() { + this.viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({}); + } //添加wms static addlayer(geoWorkspace, layerName) { let matrixIds = [ @@ -162,7 +171,7 @@ class CesiumUtils { this.viewer.imageryLayers.remove(this.privide); } - static addPoint(pLon, pLat, pAlt, isSelected = false,pointId = null) { + static addPoint(pLon, pLat, pAlt, isSelected = false, pointId = null) { var pointEntity = this.viewer.entities.add({ id: pointId, position: Cesium.Cartesian3.fromDegrees(pLon, pLat, 10), @@ -179,46 +188,46 @@ class CesiumUtils { this.viewer.entities.removeAll(); } //修改点的位置 - static clickToAddPoint(callback){ + static clickToAddPoint(callback) { //清空之前的handler if (this.addPointHandler) { this.addPointHandler.destroy(); } - var scene = this.viewer.scene; - this.addPointHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas); - const that = this; - this.addPointHandler.setInputAction(function (movement) { - // 清除历史单击点 - var cartesian = that.viewer.camera.pickEllipsoid( - movement.position, - scene.globe.ellipsoid - ); - if (cartesian) { - var cartographic = Cesium.Cartographic.fromCartesian(cartesian); // 转弧度 - // 将弧度转换为度数 - var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6); - var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6); - let lng = Number(longitudeString); - let lat = Number(latitudeString); - const positions = [lng, lat]; - that.viewer.entities.removeById("theNewPoint"); - that.viewer.entities.add({ - id: "theNewPoint", - position: cartesian, - point: { - color: Cesium.Color.fromCssColorString('#9cf7e3'), - pixelSize: 10 - // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND - } - }); - //通过callback函数将数据传递到外部使用 - callback(positions); + var scene = this.viewer.scene; + this.addPointHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas); + const that = this; + this.addPointHandler.setInputAction(function (movement) { + // 清除历史单击点 + var cartesian = that.viewer.camera.pickEllipsoid( + movement.position, + scene.globe.ellipsoid + ); + if (cartesian) { + var cartographic = Cesium.Cartographic.fromCartesian(cartesian); // 转弧度 + // 将弧度转换为度数 + var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6); + var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6); + let lng = Number(longitudeString); + let lat = Number(latitudeString); + const positions = [lng, lat]; + that.viewer.entities.removeById("theNewPoint"); + that.viewer.entities.add({ + id: "theNewPoint", + position: cartesian, + point: { + color: Cesium.Color.fromCssColorString('#9cf7e3'), + pixelSize: 10 + // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND } - }, Cesium.ScreenSpaceEventType.LEFT_CLICK); + }); + //通过callback函数将数据传递到外部使用 + callback(positions); + } + }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } //销毁监听 - static destroyClickToAddPoint(){ - if(this.addPointHandler){ + static destroyClickToAddPoint() { + if (this.addPointHandler) { this.addPointHandler.destroy(); } } @@ -349,8 +358,8 @@ class CesiumUtils { }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } //销毁点击事件 - static destoryHandleClick(){ - if(this.clickShowPopHandler){ + static destoryHandleClick() { + if (this.clickShowPopHandler) { this.clickShowPopHandler.destroy() } } diff --git a/src/views/Daichuli/Feedback/index.vue b/src/views/Daichuli/Feedback/index.vue index c437c55..4bc65b0 100644 --- a/src/views/Daichuli/Feedback/index.vue +++ b/src/views/Daichuli/Feedback/index.vue @@ -78,7 +78,7 @@ @click="downLoadPro">下载 + @addSample="getSqlData" @addDemLayer="addDemLayer" @removeDemLayer="removeDemLayer">
@@ -88,9 +88,9 @@
{{ orderMsg.productSubClassId == 39 - ? "地表覆盖类型表" - : "植被物候类型表" - }} + ? "地表覆盖类型表" + : "植被物候类型表" + }}
@@ -508,6 +508,12 @@ export default { removeLayer() { cu.clearLayers(); }, + addDemLayer() { + cu.addDemLayer(); + }, + removeDemLayer() { + cu.removeDemLayer(); + }, removeSplData() { cu.removePoint(); },