管道基础大数据平台系统开发-【前端】-新系統界面
1
Surpriseplus
2023-02-16 a92fa5ec4d415ccc42f8c3b7eae7d07cc8418889
src/components/MapView/mapMenuTop.vue
@@ -43,7 +43,7 @@
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          @change="changeValue($event)"
@@ -87,6 +87,19 @@
          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>
@@ -122,7 +135,7 @@
          children: [],
        },
      ],
      queryOption: [
        {
          value: 'point',
@@ -154,24 +167,24 @@
        label: 'label',
      },
      graphicLayer: null,
      flyEntity: null,
    };
  },
  mounted() {
    // sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
    this.menuTopFrom.queryType = 'rectangle';
    this.getAllTable();
  },
  methods: {
    changeValue(value) {
      // var obj = {};
      // obj = this.queryOption.find(function (item) {
      //   return item.value === value;
      // });
      // if (obj.value == 'inputFile') {
      //   this.getMenuTopFile();
      // }
      var obj = {};
      obj = this.queryOption.find(function (item) {
        return item.value === value;
      });
      if (obj.value == 'inputFile') {
        this.getMenuTopFile();
      }
    },
    async getAllTable() {
      const data = await inquiry_SelectTabs();
@@ -179,11 +192,11 @@
        this.$message.error('列表调用失败');
      }
      var option = data.result;
      for (var i in option) {
        var val_Data = option[i];
        val_Data.id = '1' + i;
        val_Data.label = val_Data.tabDesc  ;
        val_Data.label = val_Data.tabDesc;
        if (option[i].ns == 'bd') {
          this.layerData[0].children.push(val_Data);
        } else {
@@ -195,7 +208,7 @@
    getCheckedNodes() {
      var valTree = this.$refs.tree.getCheckedNodes();
      if (valTree.length == 0) return;
      this.menuTopFrom.queryLayer = valTree[0].tabDesc;
      for (var i = 0; i < valTree.length; i++) {
        this.treeChange.push(valTree[i]);
@@ -206,7 +219,7 @@
      this.treeChange = [];
      this.menuTopFrom.queryLayer = null;
      this.$refs.tree.setCheckedKeys([]);
    },
    //导入shp文件
    async setMenuTopFile() {
@@ -224,7 +237,7 @@
        }
      }
      if (count != 4) {
        this.$message({
          message: 'ShapeFile文件选择不全!',
          type: 'warning'
@@ -258,7 +271,16 @@
      //清空标绘
      sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
      sgworld.Creator.SimpleGraphic.clear();
      if (this.$store.state.queryInfo.length != 0) {
        for (var i in this.$store.state.queryInfo) {
          sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i]);
        }
        this.$store.state.queryInfo = [];
      }
      if (this.$store.state.primitLayer != null) {
        sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
        this.$store.state.primitLayer = null;
      }
      if (this.treeChange.length == 0) {
        this.$message.error('请选择要查询的数据');
        return;
@@ -272,6 +294,7 @@
            outlineWidth: 5,
          },
          (entity) => {
            this.setTurfGeometry(entity);
          }
        );
@@ -281,44 +304,51 @@
    },
    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,
            rectangle.height
          );
          that.setTurfPolyOrLine(result, 'rectangle');
          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 = {
        steps: 10,
        units: 'miles',
        units: 'meters',
        properties: { foo: 'bar' },
      };
      var circle = turf.circle(position, radius, options);
      this.setJonToWKT(circle);
    },
    setTurfPolyOrLine(res, type) {
@@ -330,7 +360,7 @@
      }
      if (type == 'polyline') {
        var line = turf.lineString(std, { name: 'polyline' });
        restVal = turf.buffer(line, 10, { units: 'miles' });
        restVal = turf.buffer(line, 10, { units: 'meters' });
      } else if (type == 'rectangle') {
        var ste = this.setCartesianToEightFour(res[0]);
        std.push([ste.lng, ste.lat]);
@@ -342,34 +372,34 @@
      }
      this.setJonToWKT(restVal);
    },
    setJonToWKT(res) {
      console.log(res.geometry)
      var jsonToWkt = this.$wkt.convert(res.geometry);
      this.$store.state.mapMenuShpFile = encr(jsonToWkt);
      this.showMapMenuPop();
    },
    showMapMenuPop() {
      this.$store.state.mapSpaceQueryLayer = this.treeChange;
      this.$store.state.mapPopBoxFlag = '1';
      // this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close();
      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()
          }
          // 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();
      // this.$bus.$emit('changeMapMenuTop', 'true');
      // sgworld.Creator.SimpleGraphic.clear();
      //清空inputFile
      // var file = document.getElementById('getMenuTopFile');
      // file.outerHTML = file.outerHTML;
@@ -381,22 +411,21 @@
      this.menuTopFrom.queryLayer = null;
      this.menuTopFrom.queryType = 'rectangle';
      this.$refs.tree.setCheckedKeys([]);
      // //清除对象
      // 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;
      // }
      //清空标绘
      sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
      sgworld.Creator.SimpleGraphic.clear();
      if (this.$store.state.queryInfo.length != 0) {
        for (var i in this.$store.state.queryInfo) {
          sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i]);
        }
        this.$store.state.queryInfo = [];
      }
      //关闭窗口
      this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close("queryinfo");
      if (this.$store.state.primitLayer != null) {
        sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
        this.$store.state.primitLayer = null;
      }
    },
    setCartesianToEightFour(res) {
      var std = {};
@@ -426,5 +455,4 @@
  padding: 4px 20px;
  font-weight: 400;
}
</style>