优化图层管理的折叠会折叠其它的面板；优化柱状图属性界面；优化WMS图层加载效果；优化资料馆上传的附件，前端显示不出来效果；综合展示拾取功能

Surpriseplus

2023-03-15 f0cf67e3f93bef082f2ca02139a7fe647b33e467

 src/components/MapView/mapSpacePop.vue

@@ -1,13 +1,11 @@
<template>
  <div class="menuPop">
    <div class="rightTitle">
      <span>管道</span>
      <el-link @click="closeSpaceBox" :underline="false" class="boxClose"
        ><i class="el-icon-close"></i>
      </el-link>
    </div>
    <div style="padding: 5px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-select
            v-model="formInline.name"
@@ -47,27 +45,71 @@
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="setSpaceTableLayer">查詢</el-button>
          <el-button plain @click="restSpacePopLayer">重置</el-button>
          <el-button
            size="small"
            plain
            @click="setSpaceTableLayer"
          >查询</el-button>
          <el-button
            plain
            size="small"
            @click="restSpacePopLayer"
          >重置</el-button>
        </el-form-item>

        <el-form-item v-if="spaceLayer == 'sexplorationpoint'">
          <el-button
            size="small"
            @click="spaceHistogram( )"
            plain
          >柱状图</el-button>
          <!-- <el-button
            plain
            size="small"
          >剖切图</el-button> -->
        </el-form-item>
      </el-form>
      <div class="centTable">
        <el-table :data="tableData" height="220" style="width: 100%">
        <el-table
          :data="tableData"
          border
          height="100%"
          ref="filterTable"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column label="定位" width="100" align="center">
          <el-table-column
            label="定位"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                icon="el-icon-map-location"
                size="mini"
                size="small"
                @click="spaceLocation(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="柱状图"
            width="100"
            align="center"
            v-if="spaceLayer == 'sexplorationpoint'"
          >
            <template slot-scope="scope">
              <el-button
                icon="el-icon-map-location"
                size="small"
                @click="spaceHistogram(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column> -->
          <el-table-column
            v-for="(item, index) in attributeData"
            :key="index"
@@ -75,16 +117,17 @@
            :prop="item.field"
            show-overflow-tooltip
            align="center"
            :fit="true"
          ></el-table-column>
        </el-table>
      </div>

      <div class="bottomPage">
      <div class="bottomPage pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listdata.pageIndex"
          :page-sizes="[10, 20, 30, 40]"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listdata.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
@@ -102,11 +145,13 @@
  inquiry_selectFields,
  inquiry_selectDomains,
  decr,
} from '../../api/api.js';
  encr,
} from "../../api/api.js"
import * as turf from "@turf/turf"
export default {
  computed: {
    storeTime() {
      return this.$store.state.mapSpaceQueryLayer;
      return this.$store.state.mapSpaceQueryLayer
    },
  },
  data() {
@@ -121,266 +166,747 @@
        filter: null,
      },
      formInline: {
        name: '',
        region: '',
        name: "",
        region: "",
      },
      attributeData: [],
      optionx: [],
      options: [],
      conditions: [
        ["=", "<>", "like"],
        [">=", ">", " =", "<=", "<", "<>"],
        [">=", ">", " =", "<=", "<", "<>"],
      ],
      options1: [
        {
          value: '=',
          label: '=',
          value: "=",
          label: "=",
        },
        {
          value: 'like',
          label: 'like',
          value: "like",
          label: "like",
        },
        {
          value: '<>',
          label: '<>',
          value: "<>",
          label: "<>",
        },
      ],
      options2: [
        {
          value: '=',
          label: '=',
          value: "=",
          label: "=",
        },
        {
          value: '<>',
          label: '<>',
          value: "<>",
          label: "<>",
        },
        {
          value: '<=',
          label: '<=',
          value: "<=",
          label: "<=",
        },
        {
          value: '<',
          label: '<',
          value: "<",
          label: "<",
        },
        {
          value: '>=',
          label: '>=',
          value: ">=",
          label: ">=",
        },
        {
          value: '>',
          label: '>',
          value: ">",
          label: ">",
        },
      ],
      value: '',
      value: "",
      tableData: [],
      spaceLayer: '',
      spaceLayer: "",
      imagePoint: null,
      domainsLayer: null,
    };
      querytype: null,
    }
  },
  watch: {
    async storeTime(index) {
      this.spaceLayer = index;
      this.getDomainsLayer();
      this.spaceLayer = index
      this.getDomainsLayer()
      // this.getTableselectFields();
      // this.restSpacePopLayer();
    },
  },
  created() {
    this.spaceLayer = this.$store.state.mapSpaceQueryLayer;
    this.spaceLayer = this.$store.state.mapSpaceQueryLayer
    // this.showSpacePopLayer();
    //   this.getTableselectFields();
    this.getDomainsLayer();


    this.getDomainsLayer()
  },

  methods: {
    closeSpaceBox() {
      if (this.imagePoint != null) {
        sgworld.Creator.DeleteObject(this.imagePoint);
        this.imagePoint = null;
        sgworld.Creator.DeleteObject(this.imagePoint)
        this.imagePoint = null
      }
      this.$store.state.mapPopBoolean = false;
      this.$store.state.mapPopBoxFlag = null;
      this.$store.state.mapPopBoolean = false
      this.$store.state.mapPopBoxFlag = null
    },
    setSpaceTableLayer() {
      this.setListDataStart();
      this.getSpaceTableLayer();
      this.setListDataStart()
      this.getSpaceTableLayer()
    },
    restSpacePopLayer() {
      this.formInline.input = null;
      this.showSpacePopLayer();
      this.formInline.input = null
      this.showSpacePopLayer()
    },
    changeValue(value) {
      var obj = {};
      var obj = {}
      obj = this.optionx.find(function (item) {
        return item.value === value;
      });
      if (obj.type == 'serial' || obj.type == 'int') {
        this.options = this.options2;
        return item.field === value
      })

      // if (obj.type == 'serial' || obj.type == 'int') {
      //   this.options = this.options2;
      // } else {
      //   this.options = this.options1;
      // }
      this.options = []

      var std = []
      this.querytype = obj.type
      if (obj.type == "text" || obj.type == "blob") {
        std = this.conditions[0]
      } else if (obj.type == "date" || obj.type == "datetime") {
        std = this.conditions[2]
      } else {
        this.options = this.options1;
        std = this.conditions[1]
      }
      this.formInline.region = this.options[0].value;
      for (var i in std) {
        this.options.push({
          label: std[i],
          value: std[i],
        })
      }

      this.formInline.region = this.options[0].value
    },
    setListDataStart() {
      this.listdata.pageSize = 10;
      this.listdata.pageIndex = 1;
      this.tableData = [];
      this.listdata.pageSize = 10
      this.listdata.pageIndex = 1
      this.tableData = []
    },
    //初始化查询条件
    showSpacePopLayer() {
      let val_date = this.optionx[0];
      this.formInline.name = val_date.field;
      if (val_date.type == 'serial' || val_date.type == 'int') {
        this.options = this.options2;
      } else {
        this.options = this.options1;
      let val_date = this.optionx[0]
      if (val_date == null || val_date == undefined) {
        return
      }
      this.formInline.region = this.options[0].value;
      this.getSpaceTableLayer();
      this.formInline.name = val_date.field
      this.options = []
      var std = []
      this.querytype = val_date.type
      if (val_date.type == "text" || val_date.type == "blob") {
        std = this.conditions[0]
      } else if (val_date.type == "date" || val_date.type == "datetime") {
        std = this.conditions[2]
      } else {
        std = this.conditions[1]
      }
      for (var i in std) {
        this.options.push({
          label: std[i],
          value: std[i],
        })
      }

      this.formInline.region = this.options[0].value
      this.getSpaceTableLayer()
    },
    //初始化查询表的字段
    async getTableselectFields() {
      const data = await inquiry_selectFields({ name: this.spaceLayer });
      const data = await inquiry_selectFields({ name: this.spaceLayer })
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败")
      }
      this.optionx = [];
      var valadata = data.result;

      this.optionx = []
      var valadata = data.result
      for (var i in valadata) {
        if (valadata[i].showtype == 1) {
          if (
            valadata[i].domainNa != null &&
            valadata[i].domainNa != undefined
          ) {
            valadata[i].domainNa = this.getMatchDomainNa(valadata[i].domainNa);
            valadata[i].domainNa = this.getMatchDomainNa(valadata[i].domainNa)
          }
          this.optionx.push(valadata[i]);
          this.attributeData.push(valadata[i]);
          this.optionx.push(valadata[i])
          this.attributeData.push(valadata[i])
        }
      }
      this.showSpacePopLayer();
      this.showSpacePopLayer()
    },
    getMatchDomainNa(res) {
      var std = null;
      var std = null
      for (var i in this.domainsLayer) {
        if (this.domainsLayer[i].domName == res) {
          return (std = this.domainsLayer[i].codeDesc);
          return (std = this.domainsLayer[i].codeDesc)
        }
      }
      return std;
      return std
    },
    //初始化查询阈值表
    async getDomainsLayer() {
      const data = await inquiry_selectDomains({ name: this.spaceLayer });
      const data = await inquiry_selectDomains({ name: this.spaceLayer })
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败")
      }
      this.domainsLayer = data.result;
      this.setListDataStart();
      this.getTableselectFields();
      this.domainsLayer = data.result

      this.setListDataStart()
      this.getTableselectFields()
    },
    //初始化查询表格信息
    async getSpaceTableLayer() {
      this.listdata.name = this.spaceLayer;
      this.listdata.name = this.spaceLayer
      if (this.formInline.input == undefined || this.formInline.input == null) {
        this.listdata.filter = null;
        this.listdata.filter = null
      } else {
        var val
        var value = this.formInline.input
        if (this.querytype == "long" || this.querytype == "integer") {
          val = parseInt(value)
        } else if (this.querytype == "double") {
          if (this.formSql.value.indexOf(".") != -1) {
            val = value
          } else {
            val = parseFloat(value).toFixed(1)
          }
        } else if (this.querytype == "date" || this.querytype == "datetime") {
          var time = new Date(value)
          var m = time.getMonth() + 1
          var d = time.getDate()
          var y = time.getFullYear()
          val = "'" + y + "-" + this.add0(m) + "-" + this.add0(d) + "'"
        } else {
          val = "'" + value + "'"
        }

        this.listdata.filter =
          this.formInline.name +
          ' ' +
          this.formInline.region +
          ' ' +
          this.formInline.input;
          this.formInline.name + " " + this.formInline.region + " " + val
      }
      const data = await dataQuerySelectByPage(this.listdata);

      const data = await dataQuerySelectByPage(this.listdata)
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败")
      }
      var val_Data = data.result;
      this.count = data.count;
      var val_Data = data.result
      this.count = data.count

      for (var i in val_Data) {
        var valste = val_Data[i];
        var valste = val_Data[i]
        for (var j in this.optionx) {
          if (
            this.optionx[j].domainNa != null &&
            this.optionx[j].domainNa != undefined
          ) {
            valste[this.optionx[j].field] = this.optionx[j].domainNa;
            valste[this.optionx[j].field] = this.optionx[j].domainNa
          }
        }
      }
      this.tableData = data.result
      this.$refs.filterTable.doLayout()
    },

    async setCartesianToEightFour(entities) {
      var east = Cesium.Math.toDegrees(
        entities.rectangle.coordinates.getValue().east
      );
      var north = Cesium.Math.toDegrees(
        entities.rectangle.coordinates.getValue().north
      );
      var west = Cesium.Math.toDegrees(
        entities.rectangle.coordinates.getValue().west
      );
      var south = Cesium.Math.toDegrees(
        entities.rectangle.coordinates.getValue().south
      );
      var line = turf.polygon([
        [
          [east, north],
          [west, north],
          [west, south],
          [east, south],
          [east, north],
        ],
      ]);
      var wkt = this.$wkt.convert(line.geometry);
      this.listdata.pageIndex = 1;
      this.listdata.pageSize = 10;
      this.listdata.wkt = encr(wkt)

      const data = await dataQuerySelectByPage(this.listdata)
      if (data.code != 200) {
        this.$message.error("列表调用失败")
      }
      this.listdata.count = data.count;
      this.tableData = data.result;
      this.$refs.filterTable.doLayout();
      this.showHistogramLayer(data.count)
      var that = this;

      window.histogramHandler = new Cesium.ScreenSpaceEventHandler(
        sgworld.Viewer.scene.canvas
      )
      window.histogramHandler.setInputAction((event) => {
        var pick = sgworld.Viewer.scene.pick(event.endPosition);

        var propertiesFlag = that.$store.state.propertiesFlag

        if (Cesium.defined(pick)) {
          if (pick && pick.id && pick.id.tag && pick.id.tag == "Histogram") {
            that.$store.state.propertiesInfo = {
              title: pick.id.properties._exppointid._value,
              name: pick.id.properties._geoname._value,
              type: pick.id.properties.geotype._value,
              botdepth: pick.id.properties._botdepth._value,
              describe: pick.id.properties._describe._value,
            }
            that.$store.state.propertiesFlag = "2"
          } else {
            if (propertiesFlag == 1) {
              that.$store.state.propertiesFlag = propertiesFlag
            } else {
              that.$store.state.propertiesFlag = null
            }
          }
        } else {
          if (propertiesFlag == 1) {
            that.$store.state.propertiesFlag = propertiesFlag
          } else {
            that.$store.state.propertiesFlag = null
          }
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    },
    async showHistogramLayer(res) {
      var obj = {
        pageIndex: 1,
        pageSize: res,
        wkt: this.listdata.wkt,
        name: this.listdata.name
      }
      const data = await dataQuerySelectByPage(obj)
      if (data.code != 200) {
        return
      }
      var val = data.result;
      for (var i in val) {
        this.setShowHistogramLayer(val[i])
      }
    },
    async setShowHistogramLayer(res) {
      var param = {
        gid: res.gid,
        name: this.spaceLayer,
      }
      const data1 = await dataQuerySelectWktById(param)
      if (data1.code != 200) {
        this.$message.error("列表调用失败")
      }
      var val1 = decr(data1.result)
      var wkt = this.$wkt.parse(val1)
      var coord = wkt.coordinates
      var obj = {
        pageIndex: 1,
        pageSize: 10,
        name: 'sexplorationpointstratum',
        filter: "exppointid = '" + res.exppointid + "'"
      }
      var data = await dataQuerySelectByPage(obj)
      if (data.code != 200) { return }
      if (data.result.length != 0) {
        var val = data.result;
        //冒泡排序
        for (var i = 0; i < val.length; i++) {
          for (var u = i + 1; u < val.length; u++) {
            if (val[i].botdepth > val[u].botdepth) {
              var num = val[i];
              val[i] = val[u];
              val[u] = num;
            }
          }
        }
        var outlineList = [
          'rgba(141,135,114,1)',
          'rgba(248,235,179,1)',
          'rgba(185,183,151,1)',
          'rgba(224,222,94,1)',
          'rgba(250,190,153,1)',
          'rgba(197,222,130,1)',
          'rgba(208,228,177,1)',
        ]
        var num = res.elev;
        var height = 0;
        for (var i = 0; i < val.length; i++) {
          var fill, line;
          if (i >= outlineList.length) {
            var len = outlineList.length - 1;
            fill = outlineList[len];
            line = outlineList[len];
          } else {
            fill = outlineList[i];
            line = outlineList[i];
          }
          var height = num - val[i].botdepth
          var layer = Viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(coord[0], coord[1]),
            tag: 'Histogram',
            properties: val[i],
            ellipse: {
              semiMinorAxis: 1.0, //短轴
              semiMajorAxis: 1.0, //长轴
              height: height, //拉伸高度    elev  gwaterdep
              extrudedHeight: num, //离地高度
              rotation: Cesium.Math.toRadians(0), //旋转
              fill: true, //是否显示圆的填充
              material: Cesium.Color.fromCssColorString(line), //圆的颜色,
              outline: false, //是否显示圆轮廓

            },
          });
          num -= val[i].botdepth;
          this.$store.state.histogramLayer.push(layer)
        }
      }

    },




    spaceHistogram() {
      this.restSpacePopLayer();
      if (this.$store.state.histogramLayer.length != 0) {
        for (var i in this.$store.state.histogramLayer) {
          Viewer.entities.remove(this.$store.state.histogramLayer[i])
        }
      }
      if (window.histogramHandler != null && Cesium.defined(window.histogramHandler)) {
        window.histogramHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.MOUSE_MOVE
        )
        window.histogramHandler = null
      }
      var that = this;
      sgworld.Creator.createSimpleGraphic('rectangle', { showSize: false }, function (entity) {
        sgworld.Creator.SimpleGraphic.remove(entity.id);
        that.setCartesianToEightFour(entity)
      });




      // var param = {
      //   gid: row.gid,
      //   name: this.spaceLayer,
      // }
      // const data1 = await dataQuerySelectWktById(param)
      // if (data1.code != 200) {
      //   this.$message.error("列表调用失败")
      // }

      // var val1 = decr(data1.result)
      // var wkt = this.$wkt.parse(val1)
      // var coord = wkt.coordinates
      // var obj = {
      //   pageIndex: 1,
      //   pageSize: 10,
      //   name: 'sexplorationpointstratum',
      //   filter: "exppointid = '" + row.exppointid + "'"
      // }
      // var data = await dataQuerySelectByPage(obj)
      // if (data.code != 200) {

      // }

      // if (data.result.length != 0) {
      //   var val = data.result;
      //   //冒泡排序
      //   for (var i = 0; i < val.length; i++) {
      //     for (var u = i + 1; u < val.length; u++) {

      //       if (val[i].botdepth > val[u].botdepth) {
      //         var num = val[i];
      //         val[i] = val[u];
      //         val[u] = num;
      //       }
      //     }
      //   }
      //   var outlineList = [
      //     'rgba(141,135,114,1)',
      //     'rgba(248,235,179,1)',
      //     'rgba(185,183,151,1)',
      //     'rgba(224,222,94,1)',
      //     'rgba(250,190,153,1)',
      //     'rgba(197,222,130,1)',
      //     'rgba(208,228,177,1)',
      //   ]
      //   var num = row.elev;
      //   var height = 0;
      //   for (var i = 0; i < val.length; i++) {
      //     var fill, line;
      //     if (i > outlineList.length) {
      //       var len = outlineList.length - 1;
      //       fill = outlineList[len];
      //       line = outlineList[len];
      //     } else {
      //       fill = outlineList[i];
      //       line = outlineList[i];
      //     }
      //     var height = num - val[i].botdepth
      //     var layer = Viewer.entities.add({
      //       position: Cesium.Cartesian3.fromDegrees(coord[0], coord[1]),
      //       tag: 'Histogram',
      //       properties: val[i],
      //       ellipse: {
      //         semiMinorAxis: 1.0, //短轴
      //         semiMajorAxis: 1.0, //长轴
      //         height: height, //拉伸高度    elev  gwaterdep
      //         extrudedHeight: num, //离地高度
      //         rotation: Cesium.Math.toRadians(0), //旋转
      //         fill: true, //是否显示圆的填充
      //         material: Cesium.Color.fromCssColorString(line), //圆的颜色,
      //         outline: false, //是否显示圆轮廓

      //       },
      //     });
      //     num -= val[i].botdepth;
      //     this.$store.state.histogramLayer.push(layer)
      //     sgworld.Navigate.flyToObj(layer)
      //   }
      //   window.histogramHandler = new Cesium.ScreenSpaceEventHandler(
      //     sgworld.Viewer.scene.canvas
      //   )
      //   var that = this;
      //   window.histogramHandler.setInputAction((event) => {
      //     // var ellipsoid = sgworld.Viewer.scene.globe.ellipsoid;
      //     // var cartesian = sgworld.Viewer.scene.camera.pickEllipsoid(event.endPosition, ellipsoid);
      //     var pick = sgworld.Viewer.scene.pick(event.endPosition);
      //     var selectedEntity = null;

      //     if (Cesium.defined(pick)) {
      //       if (pick && pick.id && pick.id.tag && pick.id.tag == "Histogram") {

      //         that.$store.state.propertiesInfo = {
      //           title: pick.id.properties._exppointid._value,
      //           name: pick.id.properties._geoname._value,
      //           type: pick.id.properties.geotype._value,
      //           botdepth: pick.id.properties._botdepth._value,
      //           describe: pick.id.properties._describe._value,
      //         }
      //         that.$store.state.propertiesFlag = "2"
      //       } else {
      //         that.$store.state.propertiesFlag = null
      //       }
      //     } else {
      //       that.$store.state.propertiesFlag = null
      //     }

      //   }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)


      // } else {
      //   var msg = row.exppointid + " 没勘探点地层表数据，无法生成柱状图"
      //   this.$message.error(msg);
      // }
    },
    async spaceLocation(index, row) {
      var param = {
        gid: row.gid,
        name: this.spaceLayer,
      };
      const data = await dataQuerySelectWktById(param);
      }
      const data = await dataQuerySelectWktById(param)
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败")
      }

      var val1 = decr(data.result);
      var val1 = decr(data.result)
      if (val1) {
        if (this.imagePoint != null) {
          sgworld.Creator.DeleteObject(this.imagePoint);
          this.imagePoint = null;
        if (this.$store.state.primitLayer != null) {
          sgworld.Viewer.entities.remove(this.$store.state.primitLayer)
          sgworld.Creator.DeleteObject(this.$store.state.primitLayer)
          this.$store.state.primitLayer = null
        }
        var wkt = this.$wkt.parse(val1);
        this.setMapLoaction(wkt);
        var wkt = this.$wkt.parse(val1)

        this.setMapLoaction(wkt, row)
      }
    },
    handleSizeChange(val) {
      this.listdata.pageSize = val;
      this.getSpaceTableLayer();
      this.listdata.pageSize = val
      this.getSpaceTableLayer()
    },
    handleCurrentChange(val) {
      this.listdata.pageIndex = val;
      this.getSpaceTableLayer();
      this.listdata.pageIndex = val
      this.getSpaceTableLayer()
    },
    setMapLoaction(res) {
      var coord = res.coordinates;
      if (res.type == 'Point') {
        this.imagePoint = sgworld.Creator.CreateLabel(
          { X: coord[0], Y: coord[1], Altitude: 2000 },
          '',
          SmartEarthRootUrl + 'Workers/image/mark.png',
          {
            disableDepthTestDistance: Infinity,
            scale: 0.8,
          },
          0,
          '巡检点'
        );
        sgworld.Navigate.flyToObj(this.imagePoint.item);
    setMapLoaction(res, properties) {
      if (this.$store.state.primitLayer != null) {
        sgworld.Creator.DeleteObject(this.$store.state.primitLayer)
        // this.$store.state.primitLayer = null;
        sgworld.Viewer.entities.remove(this.$store.state.primitLayer)
        this.$store.state.primitLayer = null
      }
      var coord = res.coordinates

      switch (res.type) {
        case "Point":
          var val = Cesium.Cartesian3.fromDegrees(
            res.coordinates[0],
            res.coordinates[1]
          )
          var point = Viewer.entities.add({
            properties: properties,
            tag: "properties_point",
            position: val,
            billboard: {
              // 图像地址，URI或Canvas的属性
              image: SmartEarthRootUrl + "Workers/image/mark.png",
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
              // 大小是否以米为单位
              sizeInMeters: false,
              // 相对于坐标的垂直位置
              verticalOrigin: Cesium.VerticalOrigin.CENTER,
              // 相对于坐标的水平位置
              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
              // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
              scale: 1.0,
              // 是否显示
              show: true,
            },
          })
          point.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY
          this.$store.state.queryInfo.push(point)
          sgworld.Navigate.flyToObj(point)
          this.$store.state.primitLayer = point

          break
        case "LineString":
        case "MultiLineString":
          var line = res.coordinates[0]
          var std = []
          for (var i in line) {
            std.push(line[i][0], line[i][1])
          }
          var polyline = Viewer.entities.add({
            properties: properties,
            tag: "properties_line",
            polyline: {
              positions: Cesium.Cartesian3.fromDegreesArray(std),
              width: 5,
              material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
              clampToGround: true,
            },
          })
          this.$store.state.queryInfo.push(polyline)
          sgworld.Navigate.flyToObj(polyline)
          this.$store.state.primitLayer = polyline
          break
        case "MultiPolygon":
          var val = res.coordinates[0][0]
          var std = []
          for (var i in val) {
            std.push(val[i][0], val[i][1])
          }
          var entity = Viewer.entities.add({
            properties: properties,
            tag: "properties_polygon",
            polygon: {
              hierarchy: Cesium.Cartesian3.fromDegreesArray(std),
              //height : 100000,
              material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
              outline: true,
              outlineColor: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
            },
          })
          this.$store.state.queryInfo.push(entity)
          sgworld.Navigate.flyToObj(entity)
          this.$store.state.primitLayer = entity
          break
      }
      this.setMapHandler()
    },
    setMapHandler() {
      window.propertieshandler = new Cesium.ScreenSpaceEventHandler(
        sgworld.Viewer.scene.canvas
      )
      window.propertieshandler.setInputAction(event => {
        let pick = sgworld.Viewer.scene.pick(event.position)
        if (
          pick &&
          pick.id &&
          pick.id.tag &&
          pick.id.tag.includes("properties_")
        ) {
          this.$store.state.propertiesFlag = "1"
          let properties = pick.id.properties
          let propertyNames = pick.id.properties.propertyNames
          let obj = {}
          obj["eventid"] = properties["_eventid"]._value
          //
          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)
    },
  },
};
  destroyed() {
    this.$store.state.propertiesFlag = null
    if (window.propertieshandler != null && Cesium.defined(window.propertieshandler)) {
      window.propertieshandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      )
      window.propertieshandler = null
    }
  },
}
</script>

<style lang="less">
<style lang="less" scoped>
.menuPop {
  width: 100%;
  height: 100%;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid gray;
  float: left;
  .centTable {
    position: absolute;
    height: 66%;
    width: 98%;
  }
  .rightTitle {
    padding: 5px;
    color: white;

    width: 100%;
    .boxClose {
      float: right;
      margin-right: 20px;
      color: white;
    }
  }

  .bottomPage {
    position: absolute;
    bottom: 1%;
    bottom: 3%;
  }
  /deep/.el-form-item {
    margin-bottom: 0px;
  }
}
</style>