real3d-portalsite/src/components/Query/clickQuery/clickQuery.vue

<template>
  <div
    class="sm-panel sm-function-module-query"
    v-show="PoinyQueryShow && vectorShow"
    v-drag
  >
    <div class="sm-panel-header">
      <span>{{ Resource.PoinyQuery }}</span>
      <span class="closeBtn" @click="toggleVisibility">&times;</span>
    </div>
    <!-- <div class="sm-function-module-content-btn"> -->
    <div class="btnList">
      <span
        v-for="(item, index) in actionOptions"
        :key="index"
        class="icon-span"
        :title="item.lable"
        :class="item.isSelect ? 'selected-icon' : ''"
        @click="changleQueryItem(item)"
      >
        <i
          class="iconfont iconSize"
          :class="item.iconName"
          style="margin-top: 0px"
        ></i>
      </span>
      <!-- <el-button type="primary" size="small" @click.stop="mapLayerQuery"
        >点击</el-button
      >
      <el-button type="primary" size="small" @click.stop="removeMapLayerQuery"
        >清除</el-button
      > -->
    </div>
    <div class="sm-function-module-content-tabs">
      <el-tabs @tab-click="handleTabClick" v-model="activeLayerId">
        <el-tab-pane
          :label="item.label"
          :name="item.id"
          v-for="(item, index) in layerList"
          :key="index"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="sm-function-module-content-table">
      <el-collapse
        :value="activeNames"
        @change="handleCollapseChange"
        v-if="
          activeLayerId &&
          queryResults[activeLayerId] &&
          queryResults[activeLayerId].length > 0
        "
      >
        <el-collapse-item
          :title="'查询结果' + (index + 1)"
          :name="'查询结果' + (index + 1)"
          v-for="(item, index) in queryResults[activeLayerId]"
          :key="index"
        >
          <template slot="title">
            查询结果{{ index + 1
            }}<i
              title="定位"
              class="header-icon el-icon-s-promotion flyBtn2"
              @click.stop="flyTo(index)"
            ></i>
          </template>
          <el-table
            :data="item"
            :show-header="false"
            border
            style="width: 100%"
            :header-cell-style="{
              background: 'rgba(10, 25, 38, 0.6)',
              color: '#66b1ff',
              fontSize: '14px',
              fontFamily: 'Microsoft YaHei',
              fontWeight: '400',
            }"
          >
            <el-table-column prop="name" label="字段" width="100">
            </el-table-column>
            <el-table-column prop="value" label="值" width="208">
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>

    <CockpitVector v-if="store.state.vectorData.length > 0"></CockpitVector>
    <MultiLevelQuery ref="MultiLevelQuery" />
  </div>
</template>

<script>
import axios from "axios";
import { GetGDlnfo, GetXzqhTree, GetHouseInfo } from "../../../api/map";
import { keys } from "lodash";
import { handModel, handnew, clearTranslate, keyName } from "./modelLayering";
import CockpitVector from "./CockpitVector.vue";
import MultiLevelQuery from "./MultiLevelQuery.vue";

import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
import * as tdsy from "@/views/cockpit/js/tdsy";
import * as turf from "@turf/turf";
let gwtype;
let query_click = null;
let manager_layer_png = null;

export default {
  name: "clickQuery",
  components: { CockpitVector, MultiLevelQuery },

  data() {
    return {
      inited: false,
      activeLayerName: "",
      columns: [
        {
          title: "字段",
          key: "name",
        },
        {
          title: "值",
          key: "value",
        },
      ],
      layersDataUrl: window.layersDataUrl,
      layersData: [],
      layerList: [],
      loading: false,
      handler: {},
      activeNames: "查询结果1",
      activeLayerId: "",
      queryResults: {},
      queryResultsGeom: {},
      queryResultsGeomPart: {},
      viewer: null,
      dataSourceLayer: null,
      actionOptions: [
        {
          index: 1,
          lable: "图层",
          iconName: "el-icon-tickets",
          isSelect: false,
        },
        {
          index: 2,
          lable: "模型",
          iconName: "el-icon-office-building",
          isSelect: false,
        },
        {
          index: 4,
          lable: "矢量",
          iconName: "el-icon-picture",
          isSelect: false,
        },
        {
          index: 5,
          lable: "联级查询",
          iconName: "el-icon-c-scale-to-original",
          isSelect: false,
        },
        {
          index: 3,
          lable: "清除",
          iconName: "el-icon-delete",
          isSelect: false,
        },
      ],
    };
  },
  computed: {
    PoinyQueryShow: function () {
      return store.state.toolBar[9];
    },
    vectorShow: function () {
      return store.state.cockpit_vector.title ||
        store.state.cockpit_vector.goitem
        ? !store.state.viewer_flag
        : true;
    },
  },
  created() {},
  watch: {
    activeLayerId(val) {
      if (val && val != "0") {
        for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
          let obj = store.state.vectorlayerlist[i];
          if (obj.id == val) {
            if (obj.type == "S3M") {
              this.addGeometrys(true);
            } else {
              this.addGeometrys();
            }
            break;
          }
        }
      }
    },
    PoinyQueryShow(val) {
      if (!this.inited) {
        this.inited = !this.inited;
        this.viewer = viewer;
        this.viewer.entities.removeAll();
        this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        this.dataSourceLayer = new Cesium.CustomDataSource("query");
        this.viewer.dataSources.add(this.dataSourceLayer);
      }
    },
  },
  mounted() {
    this.$nextTick((res) => {
      query_click = new Cesium.CustomDataSource("query_click");
      viewer.dataSources.add(query_click);

      manager_layer_png = new Cesium.CustomDataSource("manager_layer_png");
      viewer.dataSources.add(manager_layer_png);
    });
  },
  methods: {
    isArray2D(arr) {
      // 首先检查arr是否是数组
      if (!Array.isArray(arr)) {
        return false;
      }

      // 检查数组中的每个元素是否也是数组
      for (let i = 0; i < arr.length; i++) {
        if (!Array.isArray(arr[i])) {
          return false;
        }
      }

      // 如果所有元素都是数组，那么arr是二维数组
      return true;
    },
    toggleVisibility() {
      this.removeMapLayerQuery();
      store.setToolBarAction(9);
      tdsy.remove(false);
      store.state.vectorData = [];
    },
    addGeometrys(fill) {
      this.viewer.entities.removeAll();
      this.dataSourceLayer.entities.removeAll();
      let geoms = this.queryResultsGeom[this.activeLayerId];
      let parts = this.queryResultsGeomPart[this.activeLayerId];
      for (let i = 0; i < geoms.length; i++) {
        let cur = geoms[i];
        let part = parts[i];
        let start = 0;
        let end = 0;
        for (let k = 0; k < part.length; k++) {
          let points = [];
          if (k > 0) {
            start += part[k - 1];
          }
          end += part[k];
          for (let j = start; j < end; j++) {
            let cx = cur[j][0];
            let cy = cur[j][1];
            points.push(cx);
            points.push(cy);
          }
          if (fill) {
            this.viewer.entities.add({
              polyline: new Cesium.PolylineGraphics({
                positions: Cesium.Cartesian3.fromDegreesArray(points),
                width: 3,
                material: Cesium.Color.BLUE.withAlpha(0.9),
                clampToGround: true,
              }),
              polygon: {
                //高程
                hierarchy: new Cesium.PolygonHierarchy(
                  Cesium.Cartesian3.fromDegreesArray(points)
                ),
                classificationType: Cesium.ClassificationType.BOTH,
                clampToGround: false,
                material: Cesium.Color.RED.withAlpha(0.3),
                // material: videoElement,
                // perPositionHeight: true
              },
            });
          } else {
            this.viewer.entities.add({
              polyline: new Cesium.PolylineGraphics({
                positions: Cesium.Cartesian3.fromDegreesArray(points),
                width: 3,
                material: Cesium.Color.BLUE.withAlpha(0.9),
                clampToGround: true,
              }),
            });
          }
        }
        // this.viewer.flyTo(this.viewer.entities);
      }
    },
    flyTo(index) {
      this.dataSourceLayer.entities.removeAll();
      let geoms = this.queryResultsGeom[this.activeLayerId];
      let parts = this.queryResultsGeomPart[this.activeLayerId];
      let cur = geoms[index];
      if (cur) {
        let part = parts[index];
        let start = 0;
        let end = 0;
        for (let k = 0; k < part.length; k++) {
          let points = [];
          if (k > 0) {
            start += part[k - 1];
          }
          end += part[k];
          for (let j = start; j < end; j++) {
            let cx = cur[j][0];
            let cy = cur[j][1];
            points.push(cx);
            points.push(cy);
          }
          // let e = this.dataSourceLayer.entities.
          let e = this.viewer.entities.add({
            polyline: new Cesium.PolylineGraphics({
              positions: Cesium.Cartesian3.fromDegreesArray(points),
              width: 3,
              material: Cesium.Color.RED.withAlpha(0.9),
              clampToGround: true,
            }),
          });
        }
        this.viewer.flyTo(e);
      } else {
        this.$message({
          message: "空间范围为空！",
          type: "warning",
        });
      }
    },
    handleTabClick(item, a) {
      this.activeLayerId = item.name;
    },
    // 设置数据
    setData() {
      this.dataSourceLayer = new Cesium.CustomDataSource("query");
      this.viewer.dataSources.add(this.dataSourceLayer);
      this.activeLayerId = "0";
      this.queryResults = {};
      this.queryResultsGeom = {};
      this.queryResultsGeomPart = {};
    },
    /**
     * 左键点击查询图层
     */
    async mapLayerQuery(movement) {
      let that = this;
      that.activeLayerId = "0";
      that.layerList = [];
      that.layersData = [];
      this.remove_query_click();
      let scene = viewer.scene;
      that.viewer.entities.removeAll();
      that.dataSourceLayer.entities.removeAll();
      //拾取模型
      let pickedFeature = scene.pick(movement.position);
      if (
        scene.pickPositionSupported &&
        Cesium.defined(pickedFeature) &&
        pickedFeature != null &&
        pickedFeature.primitive
      ) {
        let eneityName = pickedFeature.primitive.name;
        let Pid = "";
        var tempArr = [];
        // "ResultNetWork@管线#1"///"ResultNetWork_Node@管线#1"
        if (
          eneityName.indexOf("雨水") > -1 ||
          eneityName.indexOf("管线") > -1
        ) {
          let buildingLayer = scene.layers.find(eneityName);
          buildingLayer.indexedDBSetting.isAttributesSave = true; //保存属性
          if (buildingLayer.getSelection().length > 0) {
            const selectedId = Number(buildingLayer.getSelection()[0]);
            buildingLayer.getAttributesById([selectedId]).then(function (atts) {
              if (atts) {
                Pid = atts["管线段"] || atts["物探点"];
                var length = Object.keys(atts).length;
                var des;
                for (var i = 0; i < length; i++) {
                  var key = Object.keys(atts)[i];
                  var value = atts[key];
                  // console.log(key);
                  // console.log(value);
                  if (
                    key.toLowerCase().indexOf("shape") < 0 &&
                    key.toLowerCase().indexOf("sm") &&
                    value != ""
                  ) {
                    tempArr.push({
                      name: key,
                      value: value,
                    });
                  }
                }
              }
              //获取图层id的参数
              let substring = pickedFeature.primitive._baseUri.query;
              for (let p = 0; p < store.state.vectorlayerlist.length; i++) {
                if (store.state.vectorlayerlist[p].id == substring) {
                  that.layerList.push(store.state.vectorlayerlist[p]);
                  break;
                }
              }
              that.queryResults[substring] = [tempArr];
              that.queryResultsGeom[substring] = [];
              that.activeLayerId = substring;
            });
          }
        }

        that.loading = true;
        that.queryByPickFeature(pickedFeature, function (result, Fields) {
          that.loading = false;
          if (result != null && result.features[0].fieldNames) {
            result.features[0].fieldNames.forEach((fieldName, i) => {
              const Field = Fields.find((c) => c.FieldEn == fieldName);
              let v = result.features[0].fieldValues[i];
              if (!isNaN(parseFloat(v))) {
                v = Math.round(parseFloat(v) * 100) / 100;
              }
              that.layersData.push({
                label: Field ? Field.FieldCn : fieldName,
                value: v,
              });
            });
          } else {
            that.layersData = [];
          }
        });
      } else {
        //拾取图层
        // let pickRay = viewer.camera.getPickRay(movement.position);
        // let artesian3 = viewer.scene.globe.pick(pickRay, viewer.scene);
        let artesian3 = viewer.scene.pickPosition(movement.position);
        let xy = that.cartesian3ToWGS84(artesian3);
        //TODO wanger 分图层查询
        for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
          let obj = store.state.vectorlayerlist[i];
          if (!obj.source) {
            continue;
          }
          let queryByIDParameters = {
            getFeatureMode: "BUFFER",
            // getFeatureMode: "SPATIAL",
            spatialQueryMode: "INTERSECT",
            datasetNames: obj.source.split(","),
            geometry: {
              parts: [1],
              points: [{ y: xy.lat, x: xy.lng }],
              type: "POINT",
            },
            bufferDistance: 0.00005,
            hasGeometry: true,
          };
          let e;

          if (obj.type == "S3M") {
            e = await that.mapQuery(
              window.baseModelQueryLayer,
              queryByIDParameters
            );
          } else {
            e = await that.mapQuery(
              that.calcIserverURI(obj.url),
              queryByIDParameters
            );
          }

          // 结果高亮

          this.highlightResultsPng(xy.lng, xy.lat);
          // const outputCoords = this.convertCoordinates(e.features[0].geometry.points);

          // outputCoords.push(outputCoords[0])

          // let f = { "type": "Polygon", "coordinates": [outputCoords] };
          // let result = turf.buffer(f, 1 / 99999, {
          //   units: "kilometers",
          // });

          // let positions = [];
          // const twoDArray = result.geometry.coordinates[0];
          // const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);

          // positions = oneDArray;

          // if (this.isArray2D(oneDArray)) {
          //   const oneDArray2 = oneDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
          //   positions = oneDArray2;

          // } else {

          // }
          // query_click.entities.add({
          //   polygon: {
          //     // 获取指定属性（positions，holes（图形内需要挖空的区域））
          //     hierarchy: {
          //       positions: Cesium.Cartesian3.fromDegreesArray(positions)
          //     },
          //     // 边框
          //     outline: false,
          //     // 边框颜色
          //     outlineColor: Cesium.Color.RED,
          //     // 边框尺寸
          //     outlineWidth: 10,
          //     // 填充的颜色，withAlpha透明度
          //     material: Cesium.Color.RED,

          //     // 是否被提供的材质填充
          //     fill: true,
          //     // 恒定高度
          //     height: 1.1,
          //     // 显示在距相机的距离处的属性，多少区间内是可以显示的
          //     // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
          //     // 是否显示
          //     show: true,
          //     // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
          //     zIndex: 10
          //   }
          // });

          if (e && e.totalCount > 0) {
            that.layerList.push(store.state.vectorlayerlist[i]);
            let queryData = [];
            let geoms = [];
            //   let tempTreeData = store.state.tempResourceTree;
            //   //递归查询点击的图层信息
            //   function getTreeId(list, id) {
            //     //判断list是否是数组
            //     if (!list instanceof Array) {
            //       return null;
            //     }
            //     //遍历数组
            //     for (let i in list) {
            //       let item = list[i];
            //       if (item.id === id) {
            //         return item;
            //       } else {
            //         //查不到继续遍历
            //         if (item.children) {
            //           let value = getTreeId(item.children, id);
            //           //查询到直接返回
            //           if (value) {
            //             return value;
            //           }
            //         }
            //       }
            //     }
            //   }
            //   let legendJson = getTreeId(tempTreeData, obj.id);
            //   let parseJson =
            //     legendJson.legend != "" ? JSON.parse(legendJson.legend) : [];
            let parts = [];
            let parseJson = JSON.parse(obj.legend);
            for (let u = 0; u < e.features.length; u++) {
              let cur = [];
              var linSAr = JSON.parse(JSON.stringify(e.features[u]));
              function condition(ci) {
                return ci.status != undefined && ci.status;
              }
              if (e.features[u].fieldNames) {
                linSAr.fieldNames.forEach((fieldName, i) => {
                  let perjson = parseJson.filter(
                    (p) => p.fieldname.toUpperCase() == fieldName
                  );
                  if (perjson.length > 0) {
                    var show = condition(perjson[0]);
                    var order = perjson[0].order || linSAr.fieldNames.length;
                    if (fieldName != perjson[0].fieldaliasname)
                      fieldName = perjson[0].fieldaliasname;
                  }
                  if (show) {
                    let v = linSAr.fieldValues[i];
                    if (v != "" && !isNaN(parseFloat(v))) {
                      v = Math.round(parseFloat(v) * 100) / 100;
                    }
                    cur.push({ name: fieldName, value: v, order });
                  }
                });
              } else {
                that.$message({
                  message: "查询结果为空！",
                  type: "warning",
                  customClass: "messageIndex",
                });
              }

              //排序
              cur.sort((a, b) => a.order - b.order);
              let urlNew = obj.url + ".json";
              let resNew = await axios.get(urlNew);
              let serCode = resNew.data.prjCoordSys.epsgCode;
              let points = [];
              for (let y = 0; y < e.features[u].geometry.points.length; y++) {
                let c = {};
                if (serCode == 3857) {
                  c = that.cartesianToCartographic84(
                    e.features[u].geometry.points[y].x,
                    e.features[u].geometry.points[y].y
                  );
                } else {
                  c = e.features[u].geometry.points[y];
                }
                points.push([c.x, c.y]);
              }
              parts.push(e.features[u].geometry.parts);
              geoms.push(points);
              queryData.push(cur);
            }

            that.queryResultsGeomPart[obj.id] = parts;
            that.queryResults[obj.id] = queryData;
            that.queryResultsGeom[obj.id] = geoms;
          }
        }
        if (that.layerList.length > 0) {
          that.activeLayerId = that.layerList[0].id;
        } else {
          that.$message({
            message: "查询结果为空！",
            type: "warning",
            customClass: "messageIndex",
          });
        }
      }
    },
    highlightResultsPng(longitude, latitude) {
      manager_layer_png.entities.add({
        name: "manager_layer_png",
        position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 40),
        billboard: {
          // 图像地址，URI或Canvas的属性
          image: "./static/images/overview/go.png",
          height: 34,
          width: 36,
          scale: 1.0,
          zIndex: 2,
          show: true,
        },
      });
    },
    addLayerList(label) {
      if (this.layerList.findIndex((a) => a.label == label) >= 0) return;
      let layers = store.state.vectorlayerlist.filter(
        (element) => element.label === label
      );
      if (layers.length > 0) {
        this.activeLayerId = layers[0].id;
        this.layerList.push(layers[0]);
      }
    },
    /**
     * 左键点击模型查询
     */
    mapModelQuery(movement) {
      this.activeLayerId = "0";
      this.layerList = [];
      this.layersData = [];
      this.viewer.entities.removeAll();
      this.dataSourceLayer.entities.removeAll();
      let title;
      if (store.state.checkedData) title = store.state.checkedData.title;
      //  超图分层分户
      if (title == "分层分户" || title == "8号楼-谷") {
        let id = handModel(movement);
      } else {
        handnew(movement);
      }
      let newArr = [];
      GetHouseInfo({ id: "2c01647f-4533-4472-b20b-f5caa4c705b0" }).then(
        (res) => {
          for (const [key, value] of Object.entries(res.data)) {
            newArr.push({ name: keyName[key], value: value });
          }
          this.addLayerList(title);
          this.queryResults[this.activeLayerId] = [newArr];
          this.queryResultsGeom[this.activeLayerId] = [];
        }
      );
    },
    mapQuerys(queryName) {
      this.setData();
      let that = this;
      this.handler.setInputAction(function (movement) {
        that[queryName](movement);
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      this.handler.setInputAction(function () {
        that.removeMapLayerQuery();
        clearTranslate();
      }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    },
    /**
     * 超图
     * 根据返回的三维对象查询数据信息
     *
     * @param {*} param
     */
    async queryByPickFeature(param, completed) {
      if (param.primitive) {
        let dataUrl = "";
        let datasourceName = "";
        let Fields = [];
        for (const layerData of this.layersDataUrl) {
          for (const datasource of layerData.datasources) {
            if (datasource.Name3D == param.primitive.name) {
              dataUrl = layerData.url;
              datasourceName = datasource.DataName;
              Fields = datasource.Fields;
              break;
            }
          }
        }

        let queryByIDParameters = {
          getFeatureMode: "ID",
          datasetNames: [datasourceName],
          ids: [param.id],
          hasGeometry: "false",
        };
        if (!dataUrl) {
          completed(null);
        } else {
          let e = await this.mapQuery(dataUrl, queryByIDParameters);
          if (completed) {
            completed(e, Fields);
          }
        }
      }
    },
    async mapQuery(url, queryObj) {
      let response = await axios.post(url, queryObj);
      if (response.data.featureCount > 0) {
        return response.data;
      } else {
        return null;
      }
    },
    convertCoordinates(coordArray) {
      return coordArray.map((coord) => [coord.x, coord.y]);
    },
    // 取消左键点击查询
    removeMapLayerQuery() {
      this.queryResults = {};
      this.queryResultsGeom = {};
      this.queryResultsGeomPart = {};
      this.layerList = [];
      this.viewer.entities.removeAll();
      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
      this.dataSourceLayer.entities.removeAll();
      this.viewer.dataSources.remove(this.dataSourceLayer);
    },
    /**
     * 笛卡尔坐标系转WGS84坐标系(经纬度)
     * @author
     * @param {object} point 点,笛卡尔坐标{x:x,y:y,z:z}
     * @returns {object} -lat: lat, lng: lng, alt: alt
     */
    cartesian3ToWGS84(point) {
      var cartesian3 = new Cesium.Cartesian3(point.x, point.y, point.z);
      var cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
      var lat = Cesium.Math.toDegrees(cartographic.latitude);
      var lng = Cesium.Math.toDegrees(cartographic.longitude);
      var alt = cartographic.height;
      return {
        lat: lat,
        lng: lng,
        alt: alt,
      };
    },
    /**
     * 墨卡托坐标系转WGS84坐标系(经纬度)
     * @author
     * @param number x
     * @param number y
     * @returns {object} x: x, y: y, z: z
     */
    cartesianToCartographic84(x, y) {
      let cartesian3InMercator = new Cesium.Cartesian3(x, y, 0);
      let mercator = new Cesium.WebMercatorProjection();
      let p = mercator.unproject(cartesian3InMercator);
      // 将墨卡托坐标转换为WGS84坐标
      // let cartesian3InWGS84 =
      //   Cesium.Ellipsoid.WGS84.cartesianToCartographic(mercator.unproject(cartesian3InMercator));
      return {
        x: Cesium.Math.toDegrees(p.longitude),
        y: Cesium.Math.toDegrees(p.latitude),
        z: p.height,
      };
    },
    calcIserverURI(url) {
      let uriArr = url.split("/");
      uriArr[5] = uriArr[5].replace("map-", "data-");
      uriArr[7] = "data";
      uriArr[8] = "featureResults.rjson?returnContent=true";
      return uriArr.join("/");
    },
    remove_query_click() {
      for (var i = 0; i < 10; i++) {
        query_click.entities.values.forEach((res) => {
          query_click.entities.remove(res);
        });
      }

      // 图标
      var entities = manager_layer_png.entities.values;
      for (var i = entities.length - 1; i >= 0; i--) {
        manager_layer_png.entities.remove(entities[i]);
      }
    },
    //地图数据查询事件
    changleQueryItem(item) {
      switch (item.index) {
        case 1: {
          this.mapQuerys("mapLayerQuery"); //图层点击事件
          this.remove_query_click();
          this.viewer.entities.removeAll();
          break;
        }
        case 2: {
          this.mapQuerys("mapModelQuery");
          break;
        }
        case 3: {
          this.removeMapLayerQuery(); //清除
          clearTranslate();
          pick_cockpit_vector.clear_data(); //矢量拾取清除
          this.$refs.MultiLevelQuery.clear_data(); //多级查询

          this.remove_query_click();

          break;
        }
        case 4: {
          //驾驶舱矢量数据点选查询
          pick_cockpit_vector.init_handler();
          break;
        }
        case 5: {
          //联级查询
          this.$refs.MultiLevelQuery.init_handler();
          break;
        }
        default:
          break;
      }
    },
  },
  beforeDestroy() {
    this.removeMapLayerQuery();
    clearTranslate();
  },
};
</script>
<style>
.sm-function-module-content-btn {
  text-align: center;
  padding-top: 5px;
}

.flyBtn2 {
  position: absolute;
  right: 47px;
}

.el-tabs__item {
  color: white !important;
}

.sm-function-module-content-tabs {
  height: 45px;
  padding: 1px 5px 0px 5px;
  /* margin-top: 4rem; */
}

.sm-function-module-content-table {
  height: 564px;
  overflow-y: auto;
  padding: 1px 5px 0px 5px;
}

.sm-function-module-query {
  /* padding: 5px 10px; */
  overflow: hidden;
  max-height: 700px;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;

  /* IE 10+ */
  @media (max-width: 1000px) {
    margin: 0.8rem 0;
    padding: 0 15px;
  }

  @media (max-width: 750px) {
    margin: 0.5rem 0;
    padding: 0 10px;
    max-height: 410px;
  }

  @media (max-height: 480px) {
    margin: 0.5rem 0;
    padding: 0 15px;
    max-height: 420px;
    max-width: 280px;
  }

  @media (max-height: 300px) {
    margin: 0.5rem 0;
    padding: 0 10px;
    max-height: 280px;
    max-width: 250px;
  }

  @media (max-height: 250px) {
    max-height: 240px;
  }
}
</style>
<style lang="scss" scoped>
@import "clickQuery";

/deep/ .el-table tr {
  background: rgba(10, 25, 38, 0.5) !important;
}

/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  background: rgba(10, 25, 38, 0.5) !important;

  border-bottom: 1px solid #ebeef5;
}

.el-table {
  color: #fff;
  background: rgba(10, 25, 38, 0.5) !important;
}

/deep/ .el-table__fixed-right::before,
.el-table__fixed::before {
  background: rgba(10, 25, 38, 0.9) !important;
}

/deep/ .el-table__fixed-right-patch {
  background: rgba(10, 25, 38, 0.9) !important;
}

/deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: rgba(10, 25, 38, 0) !important;
}

/deep/ .el-collapse-item__header {
  background-color: transparent !important;
  color: rgb(217, 237, 254) !important;
}

/deep/ .el-collapse {
  border: none;
  /* border-top: 1px solid #EBEEF5; */
  /* border-bottom: 1px solid #EBEEF5; */
}

/deep/ .el-collapse-item__content {
  padding-bottom: 0px;
}
</style>