源数据管理，图层管理，空间查询

Surpriseplus

2023-02-23 ff2afbce0f31c6f75f4930ba8db7ccb7a99556a4

 src/components/MapView/mapSpacePop.vue

@@ -1,8 +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"
@@ -42,8 +45,16 @@
          ></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>
      <div class="centTable">
@@ -59,11 +70,15 @@
            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>
@@ -84,7 +99,7 @@
          @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"
@@ -127,6 +142,11 @@
      attributeData: [],
      optionx: [],
      options: [],
      conditions: [
        ['<>', 'like'],
        ['>=', '>', ' =', '<=', '<', '<>'],
        ['>=', '<='],
      ],
      options1: [
        {
          value: '=',
@@ -207,15 +227,35 @@
      this.showSpacePopLayer();
    },
    changeValue(value) {

      var obj = {};
      obj = this.optionx.find(function (item) {
        return item.value === value;
        return item.field === value;
      });
      if (obj.type == 'serial' || obj.type == 'int') {
        this.options = this.options2;
     
      // if (obj.type == 'serial' || obj.type == 'int') {
      //   this.options = this.options2;
      // } else {
      //   this.options = this.options1;
      // }
      this.options = [];

      var std = [];

      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];
      }
      for (var i in std) {
        this.options.push({
          label: std[i],
          value: std[i],
        });
      }

      this.formInline.region = this.options[0].value;
    },
    setListDataStart() {
@@ -227,11 +267,22 @@
    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;
      this.options = [];
      var std = [];
      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 {
        this.options = this.options1;
        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();
    },
@@ -269,9 +320,9 @@
    //初始化查询阈值表
    async getDomainsLayer() {
      const data = await inquiry_selectDomains({ name: this.spaceLayer });
      if (data.code != 200) {
        this.$message.error('列表调用失败');
      }
        if (data.code != 200) {
          this.$message.error('列表调用失败');
        }
      this.domainsLayer = data.result;
      this.setListDataStart();
      this.getTableselectFields();
@@ -322,9 +373,10 @@

      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);
@@ -339,20 +391,72 @@
      this.getSpaceTableLayer();
    },
    setMapLoaction(res) {
      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;
      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,
          '巡检点'
        var val = Cesium.Cartesian3.fromDegrees(
          res.coordinates[0],
          res.coordinates[1],

        );
        sgworld.Navigate.flyToObj(this.imagePoint.item);
        this.$store.state.primitLayer = Viewer.entities.add({
          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
          }
        });
        this.$store.state.primitLayer.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY;

        sgworld.Navigate.flyToObj(this.$store.state.primitLayer)

      } else if (res.type == 'MultiPolygon' || res.type == 'LineString') {
        var val = res.coordinates[0][0];
        var std = [];
        for (var i in val) {

          std.push({ x: val[i][0], y: val[i][1] })
        }
        this.$store.state.primitLayer = Viewer.entities.add({
          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.primitLayer = sgworld.Creator.createPolygon(std, {
        //   fillColor: '#ffff00',
        //   outlineColor: '#fff',
        //   outlineWidth: 2
        // }, 1, 0, "面");
        sgworld.Navigate.flyToObj(this.$store.state.primitLayer);
      } else if (res.type == 'MultiLineString') {
        var line = res.coordinates[0];
        var std = [];
        for (var i in line) {

          std.push({ x: line[i][0], y: line[i][1], z: 1000 })
        }
        this.$store.state.primitLayer = sgworld.Creator.createPolyline(std, "#ffff00", 1, 0, "线");
        sgworld.Navigate.flyToObj(this.$store.state.primitLayer.item);
      }
    },
  },
@@ -373,118 +477,16 @@
  }
  .rightTitle {
    padding: 5px;
    color: white;

    width: 100%;
    .boxClose {
      float: right;
      margin-right: 20px;
      color: white;
    }
  }
  .bottomPage {
    position: absolute;
    bottom: 1%;
  }
  // 设置输入框的背景色、字体颜色、边框属性设置；
  /deep/.el-input__inner {
    background-color: transparent !important ;
    color: #fff;
    border: 1px solid;
  }
  /deep/ .el-select .el-input__inner {
    border-color: #fff !important;
  }
  /deep/ .el-table {
    background-color: transparent;
    th,
    td {
      background-color: transparent;
    }
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    // 表头背景色
    th.el-table__cell {
      background-color: #303030;
      color: #fff;
    }
    tr > td {
      background-color: #303030;
      color: #fff;
    }

    // hover效果
    tr:hover > td {
      background-color: rgba(255, 255, 255, 0.3) !important;
    }

    tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.3) !important;
      // text-align: center;
    }

    // 滚动条宽高
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      /*滚动条宽度*/
      height: 5px;
      /*滚动条高度*/
    }
    /*定义滚动条轨道 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #216fe6 inset;
      /*滚动条的背景区域的内阴影*/
      border-radius: 10px;
    }

    /*定义滑块 内阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #216fe6 inset;
      border-radius: 6px;
      background-color: #216fe6;
    }
  }
  .pagination_box {
    margin-top: 20px;
    /deep/.el-input__inner {
      background-color: transparent !important;
      border: 1px solid;
      color: white;
    }
    /deep/.el-pagination__total {
      color: white;
    }
    /deep/.el-pagination__jump {
      color: white;
    }
    /deep/.el-pager li.active {
      color: #409eff;
    }
    /deep/.el-pager li {
      color: white;
      background: transparent;
    }
    /deep/.el-pager li {
      color: white;
    }
    /deep/.btn-prev {
      background: transparent;
    }
    /deep/.btn-next {
      background: transparent;
    }
    /deep/.btn-next i {
      color: white;
    }
    /deep/.btn-prev i {
      color: white;
    }
  }
}
</style>