添加地形切换效果，底图切换功能，在线制图，服务发布页面优化，转孔柱状图更新

Surpriseplus

2023-03-21 7c60e0fe106b053bfb7f9bc889677f2a5ff35608

 src/components/MapView/mapSpacePop.vue

@@ -56,6 +56,18 @@
            @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
@@ -84,7 +96,7 @@
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column
          <!-- <el-table-column
            label="柱状图"
            width="100"
            align="center"
@@ -97,7 +109,7 @@
                @click="spaceHistogram(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
          </el-table-column> -->
          <el-table-column
            v-for="(item, index) in attributeData"
            :key="index"
@@ -133,7 +145,9 @@
  inquiry_selectFields,
  inquiry_selectDomains,
  decr,
  encr,
} from "../../api/api.js"
import * as turf from "@turf/turf"
export default {
  computed: {
    storeTime() {
@@ -284,6 +298,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 = []
@@ -382,6 +399,35 @@
      if (data.code != 200) {
        this.$message.error("列表调用失败")
      }
      var val = data.result;
      val = val.filter((res) => {

        if (res.dirName) {
          res.dirid = res.dirName
        }
        if (res.depName) {
          res.depid = res.depName
        }
        if (res.verName) {
          res.verid = res.verName
        }
        if (res.updateName) {
          res.updateuser = res.updateName
        }
        if (res.createName) {
          res.createuser = res.createName
        }

        if (res.createtime) {
          res.createtime = this.format(res.createtime)
        }
        if (res.updatetime) {
          res.createtime = this.format(res.updatetime)
        }
        return res
      })


      var val_Data = data.result
      this.count = data.count

@@ -396,30 +442,154 @@
          }
        }
      }
      this.tableData = data.result


      this.tableData = val
      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])
        }

    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) {
        return this.$message.error("列表调用失败")
      }
      if (window.histogramHandler != null && Cesium.defined(window.histogramHandler)) {
        window.histogramHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.MOUSE_MOVE
        )
        window.histogramHandler = null
      if (data.result.length == 0) {
        return this.$message({
          message: '未查询到转孔点数据',
          type: 'warning'
        });
      } else {
        this.$message({
          message: '柱状图查询成功',
          type: 'success'
        });
        setTimeout(() => {
          var val = data.result;
          val = val.filter((res) => {

            if (res.dirName) {
              res.dirid = res.dirName
            }
            if (res.depName) {
              res.depid = res.depName
            }
            if (res.verName) {
              res.verid = res.verName
            }
            if (res.updateName) {
              res.updateuser = res.updateName
            }
            if (res.createName) {
              res.createuser = res.createName
            }

            if (res.createtime) {
              res.createtime = this.format(res.createtime)
            }
            if (res.updatetime) {
              res.createtime = this.format(res.updatetime)
            }
            return res
          })


          this.listdata.count = data.count;
          this.tableData = val;

          this.showHistogramLayer(data.count)
          this.$refs.filterTable.doLayout();
          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)
        }, 500);
      }


    },
    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: row.gid,
        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
@@ -427,19 +597,15 @@
        pageIndex: 1,
        pageSize: 10,
        name: 'sexplorationpointstratum',
        filter: "exppointid = '" + row.exppointid + "'"
        filter: "exppointid = '" + res.exppointid + "'"
      }
      var data = await dataQuerySelectByPage(obj)
      if (data.code != 200) {

      }

      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];
@@ -447,27 +613,38 @@
            }
          }
        }
        // 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 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)',
          { 'name': '粉质黏土', 'color': 'rgba(139,106,77,1)' },
          { 'name': '淤泥质粉土', 'color': 'rgba(141,85,69,1)' },
          { 'name': '圆砾', 'color': 'rgba(102,166,184,1)' },
          { 'name': '卵石', 'color': 'rgba(54,83,173,1)' },
          { 'name': '泥岩', 'color': 'rgba(47,30,13,1)' },
          { 'name': '细砂', 'color': 'rgba(93,88,15,1)' },
          { 'name': '中砂', 'color': 'rgba(164,140,21,1)' }
        ]
        var num = row.elev;
        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 line;

          var geoname = val[i].geoname;
          var col = outlineList.filter((res) => {
            if (res.name == geoname) {
              return res
            }
          })

          line = col[0].color

          var height = num - val[i].botdepth
          var layer = Viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(coord[0], coord[1]),
@@ -487,43 +664,149 @@
          });
          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);
      }

    },




    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 = {
@@ -642,6 +925,7 @@
      this.setMapHandler()
    },
    setMapHandler() {
      var that = this;
      window.propertieshandler = new Cesium.ScreenSpaceEventHandler(
        sgworld.Viewer.scene.canvas
      )
@@ -666,14 +950,41 @@
              }
            })
          })
          if (obj['更新时间']) {
            obj['更新时间'] = that.format(obj['更新时间'])
          }
          if (obj['创建时间']) {


            obj['创建时间'] = that.format(obj['创建时间'])
          }

          this.$store.state.propertiesInfo = obj
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },
    //格式化时间
    format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + "-" + this.add0(m) + "-" + this.add0(d);
    },
    //格式化时间
    add0(m) {
      return m < 10 ? "0" + m : m;
    },

  },

  destroyed() {
    this.$store.state.propertiesFlag = null
    if (propertieshandler != null && Cesium.defined(propertieshandler)) {
    if (window.propertieshandler != null && Cesium.defined(window.propertieshandler)) {
      window.propertieshandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_CLICK
      )