数据查询

src/components/Query/clickQuery/clickQuery.vue

@@ -1,14 +1,28 @@
 <template>
-  <div class="sm-panel sm-function-module-query" v-show="PoinyQueryShow && vectorShow" v-drag>
+  <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
+        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
@@ -19,28 +33,51 @@
     </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-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">
+      <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>
+            }}<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
+            :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">
@@ -145,7 +182,7 @@ export default {
         : true;
     },
   },
-  created() { },
+  created() {},
   watch: {
     activeLayerId(val) {
       if (val && val != "0") {
@@ -332,245 +369,68 @@ export default {
         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
-        ) {
-          for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
-            let obj = store.state.vectorlayerlist[i];
-            console.log(obj.url);
-            let str1 = eneityName.match(/@(\S*)#/)[1];
-            let str2 = eneityName.match(/(\S*)@/)[1];
-            let str3 = str1 + ":" + str2;
-            let url1 = obj.url.replace("3D-", "data-");
-            let url2 = url1.replace(
-              "realspace",
-              "data/featureResults.rjson?returnContent=true"
-            );
-            let queryByIDParameters = {
-              getFeatureMode: "ID",
-              datasetNames: [str3],
-              ids: [pickedFeature.id],
-            };
-            let e = await this.mapQuery(url2, queryByIDParameters);
-            if (e && e.totalCount > 0) {
-              that.layerList.push(store.state.vectorlayerlist[i]);
-              for (let u = 0; u < e.features.length; u++) {
-                let cur = [];
-                var linSAr = JSON.parse(JSON.stringify(e.features[u]));
-                if (e.features[u].fieldNames) {
-                  linSAr.fieldNames.forEach((fieldName, i) => {
-                    let v = linSAr.fieldValues[i];
-                    if (v != "" && !isNaN(parseFloat(v))) {
-                      v = Math.round(parseFloat(v) * 100) / 100;
-                    }
-
-                    // cur.push({ name: fieldName, value: v });
-                    if (
-                      fieldName.toLowerCase().indexOf("shape") < 0 &&
-                      fieldName.toLowerCase().indexOf("sm") &&
-                      v != ""
-                    ) {
-                      cur.push({ name: fieldName, value: v });
-                    }
-                  });
-
-                  //获取图层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] = [cur];
-                  that.queryResultsGeom[substring] = [];
-                  that.activeLayerId = substring;
-                } else {
-                  that.$message({
-                    message: "查询结果为空！",
-                    type: "warning",
-                    customClass: "messageIndex",
-                  });
-                }
-              }
-            }
-          }
-        }
-
-        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 = [];
-          }
-        });
+        this.pickClick(pickedFeature);
       } 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 分图层查询
+        this.pickPosition(movement);
+      }
+    },
+    async pickClick(pickedFeature) {
+      let that = this;
+      let eneityName = pickedFeature.primitive.name;
+      let Pid = "";
+      var tempArr = [];
+      // "ResultNetWork@管线#1"///"ResultNetWork_Node@管线#1"
+      if (eneityName.indexOf("雨水") > -1 || eneityName.indexOf("管线") > -1) {
         for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
           let obj = store.state.vectorlayerlist[i];
-          if (!obj.source) {
-            continue;
-          }
+          console.log(obj.url);
+          let str1 = eneityName.match(/@(\S*)#/)[1];
+          let str2 = eneityName.match(/(\S*)@/)[1];
+          let str3 = str1 + ":" + str2;
+          let url1 = obj.url.replace("3D-", "data-");
+          let url2 = url1.replace(
+            "realspace",
+            "data/featureResults.rjson?returnContent=true"
+          );
           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,
+            getFeatureMode: "ID",
+            datasetNames: [str3],
+            ids: [pickedFeature.id],
           };
-          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
-          //   }
-          // });
-
+          let e = await this.mapQuery(url2, 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 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;
+                  let v = linSAr.fieldValues[i];
+                  if (v != "" && !isNaN(parseFloat(v))) {
+                    v = Math.round(parseFloat(v) * 100) / 100;
                   }
-                  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 });
+
+                  // cur.push({ name: fieldName, value: v });
+                  if (
+                    fieldName.toLowerCase().indexOf("shape") < 0 &&
+                    fieldName.toLowerCase().indexOf("sm") &&
+                    v != ""
+                  ) {
+                    cur.push({ name: fieldName, value: v });
                   }
                 });
+
+                //获取图层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] = [cur];
+                that.queryResultsGeom[substring] = [];
+                that.activeLayerId = substring;
               } else {
                 that.$message({
                   message: "查询结果为空！",
@@ -578,44 +438,226 @@ export default {
                   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];
+      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 = [];
+        }
+      });
+    },
+    async pickPosition(movement) {
+      let that = this;
+      //拾取图层
+      // 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;
                 }
-                points.push([c.x, c.y]);
-              }
-              parts.push(e.features[u].geometry.parts);
-              geoms.push(points);
-              queryData.push(cur);
+                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",
+              });
             }
 
-            that.queryResultsGeomPart[obj.id] = parts;
-            that.queryResults[obj.id] = queryData;
-            that.queryResultsGeom[obj.id] = geoms;
+            //排序
+            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",
-          });
-        }
+      }
+      if (that.layerList.length > 0) {
+        that.activeLayerId = that.layerList[0].id;
+      } else {
+        that.$message({
+          message: "查询结果为空！",
+          type: "warning",
+          customClass: "messageIndex",
+        });
       }
     },
     highlightResultsPng(longitude, latitude) {