综合展示点击模型显示详细信息

Surpriseplus

2023-03-09 6fe940335b9ca7f4640983929b070c00e401dc61

 src/components/MapView/mapSpacePop.vue

@@ -1,7 +1,11 @@
<template>
  <div class="menuPop">
    <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"
@@ -41,12 +45,16 @@
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" plain @click="setSpaceTableLayer"
            >查询</el-button
          >
          <el-button plain size="small" @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>
      <div class="centTable">
@@ -63,12 +71,30 @@
            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="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>
@@ -197,6 +223,8 @@
    this.spaceLayer = this.$store.state.mapSpaceQueryLayer
    // this.showSpacePopLayer();
    //   this.getTableselectFields();


    this.getDomainsLayer()
  },

@@ -256,6 +284,9 @@
    //初始化查询条件
    showSpacePopLayer() {
      let val_date = this.optionx[0]
      if (val_date == null || val_date == undefined) {
        return
      }
      this.formInline.name = val_date.field
      this.options = []
      var std = []
@@ -371,6 +402,132 @@
      this.tableData = data.result
      this.$refs.filterTable.doLayout()
    },
    async spaceHistogram(index, row) {
      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 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,