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

<template>
  <div class="sm-panel sm-function-module-query" v-show="PoinyQueryShow">
    <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%">
            <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 class="cockpit_vector"></CockpitVector> -->

  </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 * as pick_cockpit_vector from "./pick_cockpit_vector.js";

let gwtype;
export default {
  name: "clickQuery",
  components: { CockpitVector },

  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];
    },
  },
  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) => {
    });
  },
  methods: {
    toggleVisibility() {
      this.removeMapLayerQuery();
      store.setToolBarAction(9);
    },
    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.add({
            polyline: new Cesium.PolylineGraphics({
              positions: Cesium.Cartesian3.fromDegreesArray(points),
              width: 3,
              material: Cesium.Color.RED.withAlpha(0.9),
              clampToGround: true,
            }),
          });
        }
        this.viewer.flyTo(this.dataSourceLayer);
      } else {
        this.$message({
          message: "空间范围为空！",
          type: "warning",
        });
      }
    },
    handleTabClick(item, a) {
      this.activeLayerId = item.name;
      console.log('this.: ', this.activeLayerId);
    },
    // 设置数据
    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 = [];
      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) {
          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
            );
          }
          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 parts = [];
            let legendJson = getTreeId(tempTreeData, obj.id);
            for (let u = 0; u < e.features.length; u++) {
              let cur = [];
              if (legendJson.legend != "") {
                //将数据转为json
                let parseJson = JSON.parse(legendJson.legend);
                //初始化下标
                let index = -1;
                var linSAr = JSON.parse(JSON.stringify(e.features[u]));
                parseJson.forEach((p) => {
                  //将数据改为大写
                  p.fieldname = p.fieldname.toUpperCase();
                  let index1 = linSAr.fieldNames.indexOf(p.fieldname);
                  if (index1 > -1 && !condition(p)) {
                    this.$delete(linSAr.fieldNames, index1);
                    this.$delete(linSAr.fieldValues, index1);
                  }

                  //判断数据是否存在
                  index = linSAr.fieldNames.indexOf(p.fieldname);
                  if (index > -1 && p.fieldaliasname != p.fieldname) {
                    //如果数据存在数组中并且进行了修改，找到它对应的下标对数据进行替换
                    linSAr.fieldNames[index] = p.fieldaliasname;
                  }
                });
              } else {
                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) => {
                  if (linSAr.fieldValues[i] != "") {
                    let v = linSAr.fieldValues[i];
                    if (!isNaN(parseFloat(v))) {
                      v = Math.round(parseFloat(v) * 100) / 100;
                    }
                    cur.push({
                      name: fieldName,
                      value: v,
                    });
                  }
                });
                // e.features[u].fieldNames.forEach((fieldName, i) => {
                //   if (
                //     fieldName.toLowerCase().indexOf("shape") < 0 &&
                //     fieldName.toLowerCase().indexOf("sm") &&
                //     e.features[u].fieldValues[i] != ""
                //   ) {
                //     let v = e.features[u].fieldValues[i];
                //     if (!isNaN(parseFloat(v))) {
                //       v = Math.round(parseFloat(v) * 100) / 100;
                //     }
                //     cur.push({
                //       name: fieldName,
                //       value: v,
                //     });
                //   }
                // });
              } else {
                that.$message({
                  message: "查询结果为空！",
                  type: "warning",
                  customClass: "messageIndex",
                });
              }

              //排序  将value值为空串的数据放到列表最后
              // cur.sort((a, b) => {
              //   if (a === b) {
              //     return 0;
              //   } else if (a.value == null || a.value == "") {
              //     return 1;
              //   } else if (b.value == null || b.value == "") {
              //     return -1;
              //   } else {
              //     // 降序
              //     return a.value < b.value ? 1 : -1;
              //   }
              // });

              let points = [];
              for (let y = 0; y < e.features[u].geometry.points.length; y++) {
                let c = that.cartesianToCartographic84(
                  e.features[u].geometry.points[y].x,
                  e.features[u].geometry.points[y].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",
          });
        }
      }
    },
    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 == "分层分户") {
        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;
      }
    },
    // 取消左键点击查询
    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("/");
    },
    //地图数据查询事件
    changleQueryItem(item) {
      switch (item.index) {
        case 1: {
          this.mapQuerys("mapLayerQuery"); //图层点击事件
          break;
        }
        case 2: {
          this.mapQuerys("mapModelQuery");
          break;
        }
        case 3: {
          this.removeMapLayerQuery(); //清除
          clearTranslate();
          break;
        }
        case 4: {//驾驶舱矢量数据点选查询
          pick_cockpit_vector.init_handler();

          break;
        } case 5: {//联级查询
          pick_cockpit_vector.init_handler();

          break;
        }
        default:
          break;
      }
    },
  },
  beforeDestroy() {
    this.removeMapLayerQuery();
    clearTranslate();
  },
};
</script>
<style>
.cockpit_vector {
  position: absolute;
  top: 6rem;
}

.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;
}

.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";
</style>