地形压平添加参数；坡度分析 添加图例，数据上传，元数据管理，资料馆添加元数据查询，综合展示图片更换

Surpriseplus

2023-02-27 4b8943bd66fc721f8381b74eff259a2f7ffef513

 src/components/MapView/mapMenuTop.vue

@@ -1,13 +1,21 @@
<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="请选择..."
          :popper-append-to-body="false"
        >
          <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 +29,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>
@@ -41,6 +50,7 @@
          @change="changeValue($event)"
          v-model="menuTopFrom.queryType"
          placeholder="请选择..."
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in queryOption"
@@ -67,104 +77,138 @@
        > -->
      </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 $ from 'jquery';
import { inquiry_SelectTabs, inquiry_uploadShp, encr } from '../../api/api.js';
import { getToken } from '@/utils/auth';
import * as turf from '@turf/turf';
import queryinfo from "../../views/Tools/queryinfo.vue";
import $ from "jquery";
import {
  inquiry_SelectTabs,
  inquiry_uploadShp,
  encr,
  dataLib_selectTabs,
} from "../../api/api.js";
import { getToken } from "@/utils/auth";
import * as turf from "@turf/turf";
export default {
  components: { queryinfo },
  data() {
    return {
      menuTopFrom: {
        queryType: '',
        queryType: "",
      },
      treeChange: [],
      layerData: [
        {
          id: 1,
          label: '基础数据',
          tabDesc: '基础数据',
          value: 'BD',
          label: "基础数据",
          tabDesc: "基础数据",
          value: "BD",
          children: [],
        },
        {
          id: 2,
          label: '业务数据',
          tabDesc: '业务数据',
          value: 'BS',
          label: "业务数据",
          tabDesc: "业务数据",
          value: "BS",
          children: [],
        },
      ],

      queryOption: [
        {
          value: 'point',
          label: '点选',
          value: "point",
          label: "点选",
        },
        {
          value: 'polyline',
          label: '线选',
          value: "polyline",
          label: "线选",
        },
        {
          value: 'rectangle',
          label: '矩形',
          value: "rectangle",
          label: "矩形",
        },
        {
          value: 'circle',
          label: '圆形',
          value: "circle",
          label: "圆形",
        },
        {
          value: 'polygon',
          label: '多边形',
          value: "polygon",
          label: "多边形",
        },
        {
          value: 'inputFile',
          label: '导入选择范围',
          value: "inputFile",
          label: "导入选择范围",
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
        children: "children",
        label: "label",
      },
      graphicLayer: null,
      flyEntity: null,
    };
  },

  mounted() {
    // sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });

    this.menuTopFrom.queryType = 'rectangle';
    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();
      const data = await dataLib_selectTabs({
        pageIndex: 1,
        pageSize: 500,
      });
      if (data.code != 200) {
        this.$message.error('列表调用失败');
        this.$message.error("列表调用失败");
      }
      var option = data.result;

      var option = data.result.filter((res) => {
        if (res.rows != 0) {
          return res;
        }
      });
      for (var i in option) {
        var val_Data = option[i];
        val_Data.id = '1' + i;
        val_Data.label = val_Data.tabDesc + '(' + val_Data.tab + ')';
        if (option[i].ns == 'bd') {
        val_Data.id = "1" + i;
        val_Data.label = val_Data.tabDesc;
        if (option[i].ns == "bd") {
          this.layerData[0].children.push(val_Data);
        } else {
          this.layerData[1].children.push(val_Data);
@@ -178,7 +222,11 @@

      this.menuTopFrom.queryLayer = valTree[0].tabDesc;
      for (var i = 0; i < valTree.length; i++) {
        this.treeChange.push(valTree[i]);
        if (valTree[i].entity) {
          debugger
          this.treeChange.push(valTree[i]);
        }

      }
    },
    //清空树选中的节点
@@ -189,25 +237,29 @@
    },
    //导入shp文件
    async setMenuTopFile() {
      var val = document.getElementById('getMenuTopFile').files;
      var val = document.getElementById("getMenuTopFile").files;
      if (!val || !val.length) return;
      var formData = new FormData();
      var exts = ['.shp', '.shx', '.dbf', '.prj'];
      var exts = [".shp", ".shx", ".dbf", ".prj"];
      var count = 0;
      for (var i = 0; i < val.length; i++) {
        var name = val[i].name.toLocaleLowerCase();
        var ext = name.substring(name.lastIndexOf('.'));
        var ext = name.substring(name.lastIndexOf("."));
        if (exts.indexOf(ext) > -1) {
          count++;
          formData.append(val[i].name, val[i]); // fs.files[i].name,file
        }
      }

      if (count != 4) {
        alert('ShapeFile文件选择不全！');
        this.$message({
          message: "ShapeFile文件选择不全！",
          type: "warning",
        });
        return;
      }
      $.ajax(BASE_URL + '/inquiry/uploadShp?token=' + getToken(), {
        type: 'post',
      $.ajax(BASE_URL + "/inquiry/uploadShp?token=" + getToken(), {
        type: "post",
        data: formData,
        async: true,
        cache: false,
@@ -215,9 +267,10 @@
        contentType: false,
        success: (rs) => {
          if (rs.code !== 200) {
            return this.$message.error('用户角色请求错误');
            return this.$message.error("用户角色请求错误");
          }
          this.$store.state.mapMenuShpFile = rs.result;

          this.$store.state.mapMenuShpFile = rs.result.wkt;
          this.showMapMenuPop();
        },
        error: (e) => {
@@ -226,24 +279,33 @@
      });
    },
    getMenuTopFile() {
      $('#getMenuTopFile').click();
      $("#getMenuTopFile").click();
    },
    //查询
    getAttributeQuery() {
      //清空标绘
      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('请选择要查询的数据');
        this.$message.error("请选择要查询的数据");
        return;
      }
      if (this.menuTopFrom.queryType != 'inputFile') {
      if (this.menuTopFrom.queryType != "inputFile") {
        sgworld.Creator.createSimpleGraphic(
          this.menuTopFrom.queryType,
          {
            color: '#00FF0060',
            outlineColor: '#0f0',
            color: "#00FF0060",
            outlineColor: "#0f0",
            outlineWidth: 5,
          },
          (entity) => {
@@ -256,44 +318,51 @@
    },
    setTurfGeometry(res) {
      var that = this;
      var res_val;
      switch (this.menuTopFrom.queryType) {
        case 'point': //点
        case "point": //点
          var val = that.setCartesianToEightFour(res.position.getValue());
          res_val = val;
          that.setTurfCircle([val.lng, val.lat], 10);
          break;
        case 'polyline': //线
        case "polyline": //线
          var polyline = res.polyline.positions.getValue();

          that.setTurfPolyOrLine(polyline, 'polyline');
          res_val = polyline;
          that.setTurfPolyOrLine(polyline, "polyline");
          break;
        case 'rectangle': //矩形
        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');
          that.setTurfPolyOrLine(result, "rectangle");

          break;
        case 'circle': //圆
        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': //多边形
        case "polygon": //多边形
          var polygon = res.polygon.hierarchy.getValue().positions;
          that.setTurfPolyOrLine(polygon, 'polygon');
          res_val = polygon;
          that.setTurfPolyOrLine(polygon, "polygon");
          break;
      }
      this.flyEntity = res_val;
    },
    setTurfCircle(position, radius) {
      var options = {
        steps: 10,
        units: 'miles',
        properties: { foo: 'bar' },
        units: "meters",
        properties: { foo: "bar" },
      };
      var circle = turf.circle(position, radius, options);

      this.setJonToWKT(circle);
    },
    setTurfPolyOrLine(res, type) {
@@ -303,17 +372,17 @@
        var line_data = this.setCartesianToEightFour(res[i]);
        std.push([line_data.lng, line_data.lat]);
      }
      if (type == 'polyline') {
        var line = turf.lineString(std, { name: 'polyline' });
        restVal = turf.buffer(line, 10, { units: 'miles' });
      } else if (type == 'rectangle') {
      if (type == "polyline") {
        var line = turf.lineString(std, { name: "polyline" });
        restVal = turf.buffer(line, 10, { units: "meters" });
      } else if (type == "rectangle") {
        var ste = this.setCartesianToEightFour(res[0]);
        std.push([ste.lng, ste.lat]);
        restVal = turf.polygon([std], { name: 'rectangle' });
      } else if (type == 'polygon') {
        restVal = turf.polygon([std], { name: "rectangle" });
      } else if (type == "polygon") {
        var ste = this.setCartesianToEightFour(res[0]);
        std.push([ste.lng, ste.lat]);
        restVal = turf.polygon([std], { name: 'polygon' });
        restVal = turf.polygon([std], { name: "polygon" });
      }
      this.setJonToWKT(restVal);
    },
@@ -321,32 +390,57 @@
    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.$bus.$emit('changeMapMenuTop', 'true');
      sgworld.Creator.SimpleGraphic.edit(false, { editProp: false });
      sgworld.Creator.SimpleGraphic.clear();
      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.clear();
      //清空inputFile
      // var file = document.getElementById('getMenuTopFile');
      // file.outerHTML = file.outerHTML;
      this.$refs.pathClear.value = '';
      this.$refs.pathClear.value = "";
    },
    clearQuery() {
      this.$refs.pathClear.value = '';
      this.$refs.pathClear.value = "";
      this.treeChange = [];
      this.menuTopFrom.queryLayer = null;
      this.menuTopFrom.queryType = 'rectangle';
      this.menuTopFrom.queryType = "rectangle";
      this.$refs.tree.setCheckedKeys([]);
      //清空标绘
      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 = {};
@@ -375,13 +469,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>