综合展示图层管理图标切换

Surpriseplus

2023-02-14 c1514cfc69b679d05398bb1def6b24c772426aa0

 src/components/MapView/mapMenuTop.vue

@@ -1,13 +1,20 @@
<template>
  <div class="menuBox">
    <el-form :inline="true" :model="menuTopFrom" class="demo-form-inline">
    <el-form
      :inline="true"
      :model="menuTopFrom"
      class="demo-form-inline"
    >
      <el-form-item>
        <el-select
          v-model="menuTopFrom.queryLayer"
          :title="treeChange"
          placeholder="请选择..."
        >
          <el-option :value="menuTopFrom.queryLayer" style="height: 100%">
          <el-option
            :value="menuTopFrom.queryLayer"
            style="height: 100%"
          >
            <div style="height: 200px; overflow: auto">
              <el-tree
                :data="layerData"
@@ -21,16 +28,17 @@
              </el-tree>
            </div>
            <div style="margin-top: 5px">
              <el-button size="mini" plain @click="getCheckedNodes"
                >确认</el-button
              >
              <el-button
                size="mini"
                size="small"
                plain
                @click="getCheckedNodes"
              >确认</el-button>
              <el-button
                size="small"
                type="info"
                plain
                @click="resetCheckedNodes"
                >重置</el-button
              >
              >重置</el-button>
            </div>
          </el-option>
        </el-select>
@@ -67,19 +75,44 @@
        > -->
      </el-form-item>
      <el-form-item>
        <el-button plain @click="getAttributeQuery">查询</el-button>
        <el-button type="info" @click="clearQuery" plain>重置</el-button>
        <el-button
          plain
          size="small"
          @click="getAttributeQuery"
        >查询</el-button>
        <el-button
          type="info"
          size="small"
          @click="clearQuery"
          plain
        >重置</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button
          plain
          size="small"
          @click="flyQuery"
        >查看</el-button>
        <el-button
          plain
          size="small"
          @click="flyRemove"
        >取消</el-button>
      </el-form-item> -->

    </el-form>
    <queryinfo ref="queryinfo" />
  </div>
</template>

 
<script>
import queryinfo from "../../views/Tools/queryinfo.vue"
import $ from 'jquery';
import { inquiry_SelectTabs, inquiry_uploadShp, encr } from '../../api/api.js';
import { getToken } from '@/utils/auth';
import * as turf from '@turf/turf';
export default {
  components: { queryinfo },
  data() {
    return {
      menuTopFrom: {
@@ -134,6 +167,7 @@
        label: 'label',
      },
      graphicLayer: null,
      flyEntity: null,
    };
  },

@@ -144,6 +178,34 @@
    this.getAllTable();
  },
  methods: {
    flyRemove() {

    },
    flyQuery() {
    // Viewer.flyTo( sgworld.Creator.SimpleGraphic._viewer.entities._entities._array[0])
      // switch (this.menuTopFrom.queryType) {
      //   case 'point': //点
      //     Viewer.camera.flyTo({
      //       destination: Cesium.Cartesian3.fromDegrees(this.flyEntity.lng, this.flyEntity.lat, 3000),

      //     });

      //     break;
      //   case 'polyline': //线
      //     debugger
      //     break;
      //   case 'rectangle': //矩形

      //     debugger
      //     break;
      //   case 'circle': //圆
      //     debugger
      //     break;
      //   case 'polygon': //多边形
      //     debugger
      //     break;
      // }
    },
    changeValue(value) {
      // var obj = {};
      // obj = this.queryOption.find(function (item) {
@@ -163,7 +225,7 @@
      for (var i in option) {
        var val_Data = option[i];
        val_Data.id = '1' + i;
        val_Data.label = val_Data.tabDesc + '(' + val_Data.tab + ')';
        val_Data.label = val_Data.tabDesc;
        if (option[i].ns == 'bd') {
          this.layerData[0].children.push(val_Data);
        } else {
@@ -186,6 +248,7 @@
      this.treeChange = [];
      this.menuTopFrom.queryLayer = null;
      this.$refs.tree.setCheckedKeys([]);

    },
    //导入shp文件
    async setMenuTopFile() {
@@ -203,7 +266,11 @@
        }
      }
      if (count != 4) {
        alert('ShapeFile文件选择不全！');

        this.$message({
          message: 'ShapeFile文件选择不全！',
          type: 'warning'
        });
        return;
      }
      $.ajax(BASE_URL + '/inquiry/uploadShp?token=' + getToken(), {
@@ -247,6 +314,7 @@
            outlineWidth: 5,
          },
          (entity) => {

            this.setTurfGeometry(entity);
          }
        );
@@ -256,18 +324,21 @@
    },
    setTurfGeometry(res) {
      var that = this;
      var res_val;
      switch (this.menuTopFrom.queryType) {
        case 'point': //点
          var val = that.setCartesianToEightFour(res.position.getValue());
          res_val = val;
          that.setTurfCircle([val.lng, val.lat], 10);
          break;
        case 'polyline': //线
          var polyline = res.polyline.positions.getValue();

          res_val = polyline;
          that.setTurfPolyOrLine(polyline, 'polyline');
          break;
        case 'rectangle': //矩形
          let rectangle = res.rectangle.coordinates.getValue();
          res_val = rectangle;
          var result = new Cesium.Rectangle.subsample(
            rectangle,
            Cesium.Ellipsoid.WGS84,
@@ -278,14 +349,17 @@
          break;
        case 'circle': //圆
          var val = that.setCartesianToEightFour(res.position.getValue());
          res_val = res.position.getValue();
          var radius = res.ellipse.semiMajorAxis.getValue();
          that.setTurfCircle([val.lng, val.lat], radius);
          break;
        case 'polygon': //多边形
          var polygon = res.polygon.hierarchy.getValue().positions;
          res_val = polygon;
          that.setTurfPolyOrLine(polygon, 'polygon');
          break;
      }
      this.flyEntity = res_val
    },
    setTurfCircle(position, radius) {
      var options = {
@@ -319,22 +393,32 @@
    },

    setJonToWKT(res) {

      var jsonToWkt = this.$wkt.convert(res.geometry);
      this.$store.state.mapMenuShpFile = encr(jsonToWkt);

      this.showMapMenuPop();
    },
    showMapMenuPop() {
      this.$store.state.mapSpaceQueryLayer = this.treeChange;
      if (
        this.$store.state.mapPopBoolean != true &&
        this.$store.state.mapPopBoxFlag != '1'
      ) {
        this.$store.state.mapPopBoolean = true;
        this.$store.state.mapPopBoxFlag = '1';
      }
      this.$store.state.mapPopBoxFlag = '1';
      // this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close();
      this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.open("空间查询", null, {
        close: () => {

          if (this.$store.state.primitLayer != null) {
            // sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
            this.$store.state.primitLayer = null;
          }

          if (window.Viewer.scene.primitives.length != 0) {
            window.Viewer.scene.primitives.removeAll()
          }
        }
      });
      this.$bus.$emit('changeMapMenuTop', 'true');
      sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
      sgworld.Creator.SimpleGraphic.clear();
      // sgworld.Creator.SimpleGraphic.clear();
      //清空inputFile
      // var file = document.getElementById('getMenuTopFile');
      // file.outerHTML = file.outerHTML;
@@ -346,7 +430,24 @@
      this.menuTopFrom.queryLayer = null;
      this.menuTopFrom.queryType = 'rectangle';
      this.$refs.tree.setCheckedKeys([]);
 //清空标绘
      sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
      sgworld.Creator.SimpleGraphic.clear();

      // //清除对象
      // if (window.Viewer.scene.primitives.length != null) {
      //   window.Viewer.scene.primitives.removeAll();
      // }
      // if (this.$store.state.primitLayer != null) {
      //   sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
      //   this.$store.state.primitLayer = null;
      // }
      //关闭窗口
      this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close("queryinfo");




    },
    setCartesianToEightFour(res) {
      var std = {};
@@ -360,7 +461,7 @@
  },
};
</script>

 
<style lang="less" scoped>
.menuBox {
  width: 98%;
@@ -375,13 +476,5 @@
.unit-tree {
  padding: 4px 20px;
  font-weight: 400;
}
/deep/.el-input__inner {
  background-color: transparent !important ;
  color: #fff;
  border: 1px solid;
}
/deep/ .el-select .el-input__inner {
  border-color: #fff !important;
}
</style>