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 | 304 +++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 274 insertions(+), 30 deletions(-)
diff --git a/src/views/plotting/plotting.vue b/src/views/plotting/plotting.vue
index 7559be6..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">
+ <div
+ class="titleImg"
+ @click="setCloseplotting"
+ >
<ArrowLeft />
</div>
<div class="titleLable">鏍囩粯鏌ヨ</div>
@@ -12,13 +18,27 @@
<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">
- <div class="plotting_list_tr" v-for="(item, i) in list" :key="i">
+ <div
+ class="plotting_list_tr"
+ v-for="(item, i) in list"
+ :key="i"
+ @click.stop="resultShow(item)"
+ >
<div class="plotting_list_tr_name">
<img
:src="require(`../../assets/img/${item.icon}`)"
@@ -27,8 +47,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.stop="setLayerLocation(item)"
+ ></div>
+ <div
+ class="tr_btn sc"
+ @click.stop="setLayerRemove(item)"
+ ></div>
</div>
</div>
</div>
@@ -37,6 +63,7 @@
</template>
<script lang="ts" setup>
+import menuTool from "@/assets/js/Map/menuTool";
import {
ref,
onMounted,
@@ -44,24 +71,237 @@
reactive,
defineProps,
defineEmits,
+ watch,
} from "vue";
-let list = ref([
- {
- name: "Path #9",
- type: "poi",
+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([]);
+const drawFlag = ref(null);
+const plotNum = ref({
+ point: 1,
+ line: 1,
+ polygon: 2,
+});
+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) {
+ 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);
+ let obj = {
+ isshow: false,
+ entitiesData: {},
+ getData: {},
+ };
+ store.state.plottingInquireData = obj;
+ 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,
+ },
+ });
+ var point = turf.point([geom.lng, geom.lat]);
+
+ var wkt = WKT.convert(point.geometry);
+
+ list.value.push({
+ name: name,
+ // layer: layer,
icon: "d.png",
- },
- {
- name: "璺緞 #1",
- type: "line",
+ 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({
+ name: name,
+ polyline: {
+ positions: Cesium.Cartesian3.fromDegreesArray(std),
+ width: 6,
+ material: lineColor.value,
+ //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,
icon: "x.png",
- },
- {
- name: "澶氳竟褰� #5",
- type: "cover",
+ });
+ plotNum.value.line++;
+};
+const setAddEntityPolygon = (res) => {
+ var std = [];
+ var res_val = res.polygon.hierarchy.getValue().positions;
+ var geom;
+ var coord = [];
+ for (var i in res_val) {
+ 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({
+ name: name,
+ polygon: {
+ hierarchy: std,
+ material: metiaColor.value,
+ outline: true,
+ outlineColor: lineColor.value,
+ outlineWidth: 2,
+ 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,
icon: "m.png",
+ lng: center.geometry.coordinates[0],
+ lat: center.geometry.coordinates[1],
+ });
+ 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);
+};
+const resultShow = (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) {
+ list.value.splice(i, 1);
+ break;
+ }
+ }
+ store.state.plottingInquireData = null
+ }
+ }
},
-]);
+ { deep: true }
+);
</script>
<style lang="less" scoped>
@@ -69,6 +309,9 @@
width: 359px;
height: 680px;
background: rgba(7, 8, 14, 0.8);
+ box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
+ z-index: 40;
+
.plottingTitle {
width: calc(100% - 27px);
height: 42px;
@@ -86,7 +329,7 @@
align-items: center;
.titleLable {
- font-size: 24px;
+ font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #ffffff;
@@ -104,7 +347,7 @@
margin-top: 3px;
.plotting_content_title {
- font-size: 20px;
+ font-size: 16px;
font-weight: 300;
color: #ffffff;
}
@@ -124,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%;
}
@@ -134,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%;
}
@@ -144,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;
@@ -164,6 +407,7 @@
align-items: center;
justify-content: space-between;
padding: 0 25px;
+ cursor: pointer;
.plotting_list_tr_name {
display: flex;
align-items: center;
@@ -173,7 +417,7 @@
height: 27px;
}
span {
- font-size: 16px;
+ font-size: 14px;
font-weight: 300;
color: #ffffff;
margin-left: 10px;
--
Gitblit v1.9.3