属性点击事件

584911253@qq.com

2023-03-02 bc8f0b5301b4a63ff4ddd90bb7732c01bdae3a1a

属性点击事件

 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: {
            // 图像地址，URI或Canvas的属性
@@ -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>


 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();
    },
  },

 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;

 src/store/index.js

@@ -37,6 +37,9 @@
    mapMenuBoxFlag: null,
    mapSpaceQueryLayer: null,
    mapMenuShpFile: null,
    propertiesFlag: null,
    propertiesName:null,
    propertiesInfo:null,

    //主题切换
    theme: variables.theme,