From 19a4741002f4208bf7fc951cbf3219897af5699a Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期四, 26 十月 2023 16:41:22 +0800
Subject: [PATCH] 标绘查询修改
---
src/views/plotting/plotting.vue | 116 ++++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 92 insertions(+), 24 deletions(-)
diff --git a/src/views/plotting/plotting.vue b/src/views/plotting/plotting.vue
index c8fd464..73a8ea8 100644
--- a/src/views/plotting/plotting.vue
+++ b/src/views/plotting/plotting.vue
@@ -1,8 +1,14 @@
<template>
- <div v-drag class="plottingBox">
+ <div
+ v-drag
+ class="plottingBox"
+ >
<div class="plottingTitle">
<div class="tileLeft">
- <div class="titleImg" @click="setCloseplotting">
+ <div
+ class="titleImg"
+ @click="setCloseplotting"
+ >
<ArrowLeft />
</div>
<div class="titleLable">鏍囩粯鏌ヨ</div>
@@ -12,9 +18,18 @@
<div class="plotting_content_btn">
<span class="plotting_content_title">鏍囩粯宸ュ叿</span>
<div class="plotting_btn">
- <div class="btn_box_d btn_box" @click="setMenuDraw('point')"></div>
- <div class="btn_box_x btn_box" @click="setMenuDraw('polyline')"></div>
- <div class="btn_box_m btn_box" @click="setMenuDraw('polygon')"></div>
+ <div
+ class="btn_box_d btn_box"
+ @click="setMenuDraw('point')"
+ ></div>
+ <div
+ class="btn_box_x btn_box"
+ @click="setMenuDraw('polyline')"
+ ></div>
+ <div
+ class="btn_box_m btn_box"
+ @click="setMenuDraw('polygon')"
+ ></div>
</div>
</div>
<div class="plotting_list">
@@ -32,8 +47,14 @@
/><span>{{ item.name }}</span>
</div>
<div class="plotting_list_tr_btn">
- <div class="tr_btn dw" @click.stop="setLayerLocation(item)"></div>
- <div class="tr_btn sc" @click.stop="setLayerRemove(item)"></div>
+ <div
+ class="tr_btn dw"
+ @click.stop="setLayerLocation(item)"
+ ></div>
+ <div
+ class="tr_btn sc"
+ @click.stop="setLayerRemove(item)"
+ ></div>
</div>
</div>
</div>
@@ -53,6 +74,9 @@
watch,
} from "vue";
import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
+import { selectByPoint, selectByPolygon } from "@/api/api";
+import WKT from "terraformer-wkt-parser";
+import * as turf from "@turf/turf";
const emits = defineEmits(["setCloseplotting"]);
const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
let list = ref([]);
@@ -64,7 +88,14 @@
});
const lineColor = ref(null);
const metiaColor = ref(null);
-
+//鐐规煡璇㈡帴鍙�
+const selectPoint = async () => {
+ const dt = await selectByPoint();
+};
+//绾挎煡璇㈡帴鍙�
+const selectPolygon = async () => {
+ const dt = await selectByPolygon();
+};
const setLayerLocation = (res) => {
var entities = Viewer.entities._entities._array;
for (var i in entities) {
@@ -132,20 +163,28 @@
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
});
+ var point = turf.point([geom.lng, geom.lat]);
+
+ var wkt = WKT.convert(point.geometry);
+
list.value.push({
name: name,
- layer: layer,
+ // layer: layer,
icon: "d.png",
+ wkt: wkt,
+ lng: geom.lng,
+ lat: geom.lat,
});
plotNum.value.point++;
};
const setAddEntityPolyline = (res) => {
var std = [];
var res_val = res.polyline.positions.getValue();
-
+ var coord = [];
for (var i in res_val) {
var geom = setCartesianToEightFour(res_val[i]);
std.push(geom.lng, geom.lat);
+ coord.push([geom.lng, geom.lat]);
}
var name = "Plyline#" + plotNum.value.line;
var layer = Viewer.entities.add({
@@ -154,12 +193,20 @@
positions: Cesium.Cartesian3.fromDegreesArray(std),
width: 6,
material: lineColor.value,
- clampToGround: true,
+ //clampToGround: true,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //璁剧疆 HeightReference 楂樺害鍙傝�冪被鍨嬩负 CLAMP_TO_GROUND 璐村湴绫诲瀷
+ //classificationType: Cesium.ClassificationType.BOTH, //璐村湴褰㈠拰3dtile BOTH 鎴� CESIUM_3D_TILE 鎴� TERRAIN
+ verticalOrigin: Cesium.VerticalOrigin.CENTER, // 鍨傜洿浣嶇疆
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 姘村钩浣嶇疆
},
});
+ var linestring = turf.lineString(coord);
+ console.log(linestring);
+ var wkt = WKT.convert(linestring.geometry);
list.value.push({
+ wkt: wkt,
name: name,
- layer: layer,
+ // layer: layer,
icon: "x.png",
});
plotNum.value.line++;
@@ -167,10 +214,12 @@
const setAddEntityPolygon = (res) => {
var std = [];
var res_val = res.polygon.hierarchy.getValue().positions;
-
+ var geom;
+ var coord = [];
for (var i in res_val) {
- var geom = setCartesianToEightFour(res_val[i]);
+ geom = setCartesianToEightFour(res_val[i]);
std.push(Cesium.Cartesian3.fromDegrees(geom.lng, geom.lat));
+ coord.push([geom.lng, geom.lat]);
}
var name = "Polygon#" + plotNum.value.polygon;
var layer = Viewer.entities.add({
@@ -181,15 +230,33 @@
outline: true,
outlineColor: lineColor.value,
outlineWidth: 2,
- classificationType: Cesium.ClassificationType.BOTH, //璐村湴褰㈠拰3dtile
+ classificationType: Cesium.ClassificationType.BOTH, //璐村湴褰㈠拰3dtile BOTH 鎴� CESIUM_3D_TILE 鎴� TERRAIN
clampToGround: true, //寮�鍚创鍦�
height: 0,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //璁剧疆 HeightReference 楂樺害鍙傝�冪被鍨嬩负 CLAMP_TO_GROUND 璐村湴绫诲瀷
},
});
+
+ coord.push(coord[0]);
+
+ var polygon = turf.polygon([coord]);
+ var wkt = WKT.convert(polygon.geometry);
+
+ let turfPoint = [];
+ polygon.geometry.coordinates[0].forEach((e) => {
+ turfPoint.push(turf.point(e));
+ });
+ var features = turf.featureCollection(turfPoint);
+
+ var center = turf.center(features);
+
list.value.push({
+ wkt: wkt,
name: name,
- layer: layer,
+ // layer: layer,
icon: "m.png",
+ lng: center.geometry.coordinates[0],
+ lat: center.geometry.coordinates[1],
});
plotNum.value.polygon++;
};
@@ -207,28 +274,29 @@
emits("setCloseplotting", false);
};
const resultShow = (res) => {
- console.log(res);
let obj = {
isshow: true,
entitiesData: res,
getData: {},
};
// store.commit("SET_plotting", obj);
+
store.state.plottingInquireData = obj;
};
watch(
() => store.state.plottingInquireData,
(nVal, oVal) => {
+ if(!nVal)return
if (nVal.isshow == false) {
//鍒楄〃鍒犻櫎鑱斿姩
if (nVal.entitiesData != {} && nVal.entitiesData.name) {
for (var i in list.value) {
if (list.value[i].name == nVal.entitiesData.name) {
- console.log(list.value[i].name);
list.value.splice(i, 1);
break;
}
}
+ store.state.plottingInquireData = null
}
}
},
@@ -299,8 +367,8 @@
margin-right: 18px;
}
.btn_box_d {
- width: 17px;
- height: 18px;
+ width: 30px;
+ height: 30px;
background: url("../../assets/img/d.png") no-repeat center;
background-size: 100% 100%;
}
@@ -309,8 +377,8 @@
background-size: 100% 100%;
}
.btn_box_x {
- width: 26px;
- height: 27px;
+ width: 30px;
+ height: 30px;
background: url("../../assets/img/x.png") no-repeat center;
background-size: 100% 100%;
}
@@ -319,8 +387,8 @@
background-size: 100% 100%;
}
.btn_box_m {
- width: 22px;
- height: 20px;
+ width: 30px;
+ height: 30px;
background: url("../../assets/img/m.png") no-repeat center;
background-size: 100% 100%;
margin-right: 0;
--
Gitblit v1.9.3