From bc8f0b5301b4a63ff4ddd90bb7732c01bdae3a1a Mon Sep 17 00:00:00 2001
From: 584911253@qq.com <584911253@qq.com>
Date: 星期四, 02 三月 2023 17:52:16 +0800
Subject: [PATCH] 属性点击事件
---
src/components/MapView/mapSpaceTop.vue | 6 ++
src/store/index.js | 3 +
src/components/mapsdk.vue | 39 ++++++++++++++++++-
src/components/MapView/mapSpacePop.vue | 31 ++++++++++++++-
4 files changed, 73 insertions(+), 6 deletions(-)
diff --git a/src/components/MapView/mapSpacePop.vue b/src/components/MapView/mapSpacePop.vue
index 3beea60..c08795a 100644
--- a/src/components/MapView/mapSpacePop.vue
+++ b/src/components/MapView/mapSpacePop.vue
@@ -383,7 +383,7 @@
this.$store.state.primitLayer = null;
}
var wkt = this.$wkt.parse(val1);
- this.setMapLoaction(wkt);
+ this.setMapLoaction(wkt,row);
}
},
handleSizeChange(val) {
@@ -394,7 +394,7 @@
this.listdata.pageIndex = val;
this.getSpaceTableLayer();
},
- setMapLoaction(res) {
+ setMapLoaction(res,properties) {
if (this.$store.state.primitLayer != null) {
sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
// this.$store.state.primitLayer = null;
@@ -409,6 +409,8 @@
);
this.$store.state.primitLayer = Viewer.entities.add({
+ properties:properties,
+ tag : "properties_point",
position: val,
billboard: {
// 鍥惧儚鍦板潃锛孶RI鎴朇anvas鐨勫睘鎬�
@@ -429,6 +431,28 @@
this.$store.state.primitLayer.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;
sgworld.Navigate.flyToObj(this.$store.state.primitLayer)
+
+ window.propertieshandler = new Cesium.ScreenSpaceEventHandler(
+ sgworld.Viewer.scene.canvas
+ );
+ window.propertieshandler.setInputAction(event => {
+ let pick = sgworld.Viewer.scene.pick(event.position);
+ // debugger;
+ if (pick && pick.id && pick.id.tag == "properties_point") {
+ this.$store.state.propertiesFlag = '1';
+ let properties = pick.id.properties;
+ let propertyNames = pick.id.properties.propertyNames;
+ let obj = {};
+ this.attributeData.forEach(item => {
+ propertyNames.forEach(itemElement => {
+ if (itemElement == item.field){
+ obj[item.alias] = properties[itemElement]._value
+ }
+ })
+ })
+ this.$store.state.propertiesInfo = obj;
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
} else if (res.type == 'MultiPolygon' || res.type == 'LineString') {
var val = res.coordinates[0][0];
@@ -464,6 +488,9 @@
}
},
},
+ destroyed() {
+ this.$store.state.propertiesFlag = null;
+ }
};
</script>
diff --git a/src/components/MapView/mapSpaceTop.vue b/src/components/MapView/mapSpaceTop.vue
index d621f27..de3cd91 100644
--- a/src/components/MapView/mapSpaceTop.vue
+++ b/src/components/MapView/mapSpaceTop.vue
@@ -149,7 +149,11 @@
},
menuTreeCheck(value) {
this.mapSpaceQueryLayer = value;
-
+ this.layerData.forEach(item => {
+ if (this.menuTopFrom.queryLayer == item.entity){
+ this.$store.state.propertiesName = item.tabDesc;
+ }
+ })
this.getCheckedNodes();
},
},
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index 88b54ab..098015f 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -8,7 +8,6 @@
<map-menu-top v-if="$store.state.mapMenuBoxFlag == '1'" />
<map-space-top v-if="$store.state.mapMenuBoxFlag == '2'" />
</div>
-
<div
class="bufferBox"
v-if="showBufferBoxDialog"
@@ -340,6 +339,25 @@
</div>
</el-card>
</div>
+ <div class="propertiesPop" v-if="$store.state.propertiesFlag == '1'">
+ <el-card class="box-card">
+ <div slot="header">
+ <span>{{$store.state.propertiesName}}</span>
+ <div style="float: right; cursor: pointer">
+ <i
+ class="el-icon-close"
+ @click="closeBufferBox(6)"
+ ></i>
+ </div>
+ </div>
+ <div class="pointInfoBoxContext" style="height:250px;overflow-y: auto">
+ <div style="line-height: 20px" v-for="(value, key) in $store.state.propertiesInfo" :key="key">
+ <span style="font-size: 14px;font-weight: bold;margin-right: 5px">{{key}}:</span>
+ <span>{{value}}</span>
+ </div>
+ </div>
+ </el-card>
+ </div>
<!-- <div-->
<!-- @click="changeMenulayer"-->
<!-- class="center CenDiv"-->
@@ -359,7 +377,6 @@
import mapMenuTop from "./MapView/mapMenuTop.vue";
import mapSpaceTop from "./MapView/mapSpaceTop.vue";
-
import {
select_Comprehensive_ByPageAndCount,
select_Comprehensive_SelectWktById,
@@ -370,7 +387,6 @@
name: "",
components: {
mapMenuTop,
-
mapSpaceTop,
},
data() {
@@ -751,6 +767,9 @@
this.showTerrainLevelDialog = false;
this.clearTerrainLevel()
break;
+ case 6:
+ this.$store.state.propertiesFlag = null;
+ break;
}
},
//瀹氫綅
@@ -1084,6 +1103,20 @@
right: 8%;
bottom: 1%;
}
+ .propertiesPop{
+ width: 350px;
+ height: 370px;
+ z-index: 40;
+ position: absolute;
+ right: 8%;
+ bottom: 1%;
+ /deep/ .el-card__header{
+ padding: 10px 20px;
+ }
+ /deep/ .el-card__body {
+ padding: 10px 20px;
+ }
+ }
.terrainLevelBox {
width: 350px;
height: 370px;
diff --git a/src/store/index.js b/src/store/index.js
index 2440bed..fc969b2 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -37,6 +37,9 @@
mapMenuBoxFlag: null,
mapSpaceQueryLayer: null,
mapMenuShpFile: null,
+ propertiesFlag: null,
+ propertiesName:null,
+ propertiesInfo:null,
//涓婚鍒囨崲
theme: variables.theme,
--
Gitblit v1.9.3