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 =