From 8db90be7852fef2e0f49a31afdb9a864286b21dd Mon Sep 17 00:00:00 2001 From: dongjiajun <1756465965@qq.com> Date: Fri, 5 Jul 2024 16:58:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BF=AE=E6=94=B9=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ration/soilMoisture/index.vue | 78 ++++++++++++++++++++ src/lib/cesiumUtils.js | 47 +++++++++--- 2 files changed, 115 insertions(+), 10 deletions(-) diff --git a/src/components/ration/soilMoisture/index.vue b/src/components/ration/soilMoisture/index.vue index 2bcbca0..7a13c1b 100644 --- a/src/components/ration/soilMoisture/index.vue +++ b/src/components/ration/soilMoisture/index.vue @@ -98,6 +98,7 @@ type="primary" size="small" icon="el-icon-edit" + @click="editSelected(scope.$index, simpleData)" > +
+
选取点
+
保存点
+
制图单位:中国科学院空天信息创新研究院
制图日期:{{ createImgTime }}
+ { + // simpleData.splice(index, 1); + // }); + }, + //选择点 + async selectPoint(){ + //启动新增点,点击地图,新增一个点 + let res = await cu.clickToAddPoint() + cu.addPoint(res.lng, res.lat, 10); + this.updatedPoint = { + ...this.currentSelectPoint, + lng: res.lng, + lat: res.lat + } + console.log(this.updatedPoint,'查看点'); + console.log(this.simpleData[2],'查看simpleData'); + }, + // 保存点 + savePoint(){ + //清空所有点 + cu.removePoint(); + let index = this.simpleData.indexOf(this.currentSelectPoint) + //更新table中信息 + this.simpleData.splice(index,1,this.updatedPoint) + //重新添加到地图中 + if (this.simpleData.length !== 0) { + for (let i in this.simpleData) { + cu.addPoint(this.simpleData[i].lng, this.simpleData[i].lat, 10); + } + } + this.$refs.multipleTable.toggleAllSelection(); + //关闭地图按钮 + this.updatePointVisible = false; + } }, computed: { globalSampleFun: function () { @@ -741,6 +805,20 @@ export default { margin-left: 100%; white-space: nowrap; } + .update-btns{ + width: 100px; + height: 70px; + background-color: #ffffff; + position: absolute; + right: 10px; + bottom: 10px; + z-index: 99; + display: flex; + justify-content: space-around; + align-items: center; + border-radius: 10px; + flex-direction: column; + } } .onBorder { diff --git a/src/lib/cesiumUtils.js b/src/lib/cesiumUtils.js index 85717d2..2799674 100644 --- a/src/lib/cesiumUtils.js +++ b/src/lib/cesiumUtils.js @@ -162,26 +162,53 @@ class CesiumUtils { this.viewer.imageryLayers.remove(this.privide); } - static addPoint(pLon, pLat, pAlt) { + static addPoint(pLon, pLat, pAlt, isSelected = false) { var pointEntity = this.viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(pLon, pLat, pAlt), point: { pixelSize: 10, - color: Cesium.Color.YELLOW - } + color: isSelected ? Cesium.Color.RED : Cesium.Color.YELLOW, + }, }); } - + static removePoint() { this.viewer.entities.removeAll(); } - + //修改点的位置 + static clickToAddPoint(){ + return new Promise((resolve, reject) => { + var scene = this.viewer.scene; + var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); + const that = this; + handler.setInputAction(function (movement) { + // 清除历史单击点 + // handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); + // movement.position 像素的x、y坐标 + 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); + resolve({ lng, lat }); + }else{ + reject('未获取到坐标'); + } + }, Cesium.ScreenSpaceEventType.LEFT_CLICK); + }); + } //鼠标点击 static handleClick() { var scene = this.viewer.scene; var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); const that = this; - + handler.setInputAction(function (movement) { // 清除历史单击点 handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); @@ -206,10 +233,10 @@ class CesiumUtils { angleDataIds: [], geoX: longitudeString, geoY: latitudeString, - metaDataId: sessionStorage.getItem('metaDataId'), - referImageIds: [] - } - getProductValue(of).then(res => { + metaDataId: sessionStorage.getItem("metaDataId"), + referImageIds: [], + }; + getProductValue(of).then((res) => { if (res.code == 200) pValue = res.data.imagePixel; // 清空容器 const pendPreview =