From 6f6bde091d22db0680b1a6d4a8a6952541f4d07d Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 07 九月 2023 09:34:23 +0800
Subject: [PATCH] 标绘查询
---
src/views/plotting/plotting.vue | 179 +++++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 160 insertions(+), 19 deletions(-)
diff --git a/src/views/plotting/plotting.vue b/src/views/plotting/plotting.vue
index 0833867..4827279 100644
--- a/src/views/plotting/plotting.vue
+++ b/src/views/plotting/plotting.vue
@@ -18,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"></div>
- <div class="btn_box_x btn_box"></div>
- <div class="btn_box_m btn_box"></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">
@@ -37,8 +46,14 @@
/><span>{{ item.name }}</span>
</div>
<div class="plotting_list_tr_btn">
- <div class="tr_btn dw"></div>
- <div class="tr_btn sc"></div>
+ <div
+ class="tr_btn dw"
+ @click="setLayerLocation(item)"
+ ></div>
+ <div
+ class="tr_btn sc"
+ @click="setLayerRemove(item)"
+ ></div>
</div>
</div>
</div>
@@ -47,6 +62,7 @@
</template>
<script lang="ts" setup>
+import menuTool from "@/assets/js/Map/menuTool";
import {
ref,
onMounted,
@@ -56,23 +72,148 @@
defineEmits,
} from "vue";
const emits = defineEmits(["setCloseplotting"]);
-let list = ref([
- {
- name: "Path #9",
- type: "poi",
+let list = ref([]);
+const drawFlag = ref(null);
+const plotNum = ref({
+ point: 1,
+ line: 1,
+ polygon: 2,
+});
+const lineColor = ref(null);
+const metiaColor = ref(null);
+
+const setLayerLocation = (res) => {
+ var entities = Viewer.entities._entities._array;
+ for (var i in entities) {
+ if (entities[i].name == res.name) {
+ Viewer.zoomTo(entities[i]);
+ break;
+ }
+ }
+};
+
+const setLayerRemove = (res) => {
+ var entities = Viewer.entities._entities._array;
+ for (var i in entities) {
+ if (entities[i].name == res.name) {
+ Viewer.entities.remove(entities[i]);
+ list.value.splice(i, 1);
+ break;
+ }
+ }
+};
+
+const setMenuDraw = (res) => {
+ lineColor.value = Cesium.Color.fromCssColorString("rgba(106,168,225, 1)");
+ metiaColor.value = Cesium.Color.fromCssColorString("rgba(106,168,225, 0.3)");
+ drawFlag.value = res;
+ var config = {};
+ if (res != "point") {
+ config = { showSize: false };
+ }
+ sgworld.Creator.createSimpleGraphic(drawFlag.value, config, (entity) => {
+ sgworld.Creator.SimpleGraphic.clear();
+ setAddEntityLayer(entity);
+ });
+};
+const setAddEntityLayer = (res) => {
+ switch (drawFlag.value) {
+ case "point":
+ setAddEntityPoint(res);
+ break;
+ case "polyline":
+ setAddEntityPolyline(res);
+ break;
+ case "polygon":
+ setAddEntityPolygon(res);
+ break;
+ }
+};
+const setAddEntityPoint = (res) => {
+ var geom = setCartesianToEightFour(res.position.getValue());
+ var name = "Point#" + plotNum.value.point;
+ var layer = Viewer.entities.add({
+ name: name,
+ position: Cesium.Cartesian3.fromDegrees(geom.lng, geom.lat),
+ point: {
+ color: metiaColor.value,
+ outlineColor: lineColor.value,
+ pixelSize: 20,
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY,
+ },
+ });
+ list.value.push({
+ name: name,
+ layer: layer,
icon: "d.png",
- },
- {
- name: "璺緞 #1",
- type: "line",
+ });
+ plotNum.value.point++;
+};
+const setAddEntityPolyline = (res) => {
+ var std = [];
+ var res_val = res.polyline.positions.getValue();
+
+ for (var i in res_val) {
+ var geom = setCartesianToEightFour(res_val[i]);
+ std.push(geom.lng, geom.lat);
+ }
+ var name = "Plyline#" + plotNum.value.line;
+ var layer = Viewer.entities.add({
+ name: name,
+ polyline: {
+ positions: Cesium.Cartesian3.fromDegreesArray(std),
+ width: 6,
+ material: lineColor.value,
+ clampToGround: true,
+ },
+ });
+ list.value.push({
+ name: name,
+ layer: layer,
icon: "x.png",
- },
- {
- name: "澶氳竟褰� #5",
- type: "cover",
+ });
+ plotNum.value.line++;
+};
+const setAddEntityPolygon = (res) => {
+ var std = [];
+ var res_val = res.polygon.hierarchy.getValue().positions;
+
+ for (var i in res_val) {
+ var geom = setCartesianToEightFour(res_val[i]);
+ std.push(Cesium.Cartesian3.fromDegrees(geom.lng, geom.lat));
+ }
+ var name = "Polygon#" + plotNum.value.polygon;
+ var layer = Viewer.entities.add({
+ name: name,
+ polygon: {
+ hierarchy: std,
+ material: metiaColor.value,
+ outline: true,
+ outlineColor: lineColor.value,
+ outlineWidth: 2,
+ classificationType: Cesium.ClassificationType.BOTH, //璐村湴褰㈠拰3dtile
+ clampToGround: true, //寮�鍚创鍦�
+ height: 0,
+ },
+ });
+ list.value.push({
+ name: name,
+ layer: layer,
icon: "m.png",
- },
-]);
+ });
+ plotNum.value.polygon++;
+};
+const setCartesianToEightFour = (res) => {
+ var std = {};
+ let ellipsoid = window.Viewer.scene.globe.ellipsoid;
+ let cartographic = ellipsoid.cartesianToCartographic(res);
+ std.lat = Cesium.Math.toDegrees(cartographic.latitude);
+ std.lng = Cesium.Math.toDegrees(cartographic.longitude);
+ std.alt = cartographic.height;
+ return std;
+};
+
const setCloseplotting = () => {
emits("setCloseplotting", false);
};
--
Gitblit v1.9.3