点击查询

src/components/Combinations/LayerManage/LayerManage.vue

@@ -339,11 +339,12 @@ export default {
         if (obj.serverType == "geoserver") {
           switch (obj.type) {
             case "wms":
-              // this.vectorlayerlist.push(obj);
+              this.vectorlayerlist.push(obj);
               this.layerparams[obj.id] = this.addWMS(obj);
               store.setlayerparamsList(this.layerparams);
               break;
             case "wmts":
+              this.vectorlayerlist.push(obj);
               this.layerparams[obj.id] = this.addWMTS(obj);
               store.setlayerparamsList(this.layerparams);
               break;

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">
@@ -62,7 +99,7 @@ import { keys } from "lodash";
 import { handModel, handnew, clearTranslate, keyName } from "./modelLayering";
 import CockpitVector from "./CockpitVector.vue";
 import MultiLevelQuery from "./MultiLevelQuery.vue";
-
+import { loadGeoJSON, str2Unicode } from "@/utils/MapHelper/help.js";
 import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
 import * as tdsy from "@/views/cockpit/js/tdsy";
 import * as turf from "@turf/turf";
@@ -146,17 +183,18 @@ export default {
         : true;
     },
   },
-  created() { },
+  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);
+            if (obj.serverType == "geoserver") {
+              this.removeGeoJSON();
+              this.addGeoJson("#0000ff");
             } else {
-              this.addGeometrys();
+              this.addGeometrys(obj.type == "S3M");
             }
             break;
           }
@@ -174,6 +212,7 @@ export default {
     },
   },
   mounted() {
+    console.log(str2Unicode(`fid_城镇`));
     this.$nextTick((res) => {
       query_click = new Cesium.CustomDataSource("query_click");
       viewer.dataSources.add(query_click);
@@ -262,36 +301,19 @@ export default {
       }
     },
     flyTo(index) {
-      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 = dataSourceLayer.entities.
-          let e = viewer.entities.add({
-            polyline: new Cesium.PolylineGraphics({
-              positions: Cesium.Cartesian3.fromDegreesArray(points),
-              width: 3,
-              material: Cesium.Color.RED.withAlpha(0.9),
-              clampToGround: true,
-            }),
-          });
-          viewer.flyTo(e);
+        if (cur.type) {
+          this.removeGeoJSON();
+          loadGeoJSON(
+            cur,
+            "#0000ff",
+            { isfly: true, fill_a: 0.001 },
+            (data) => (data.name = "geoserver")
+          );
+        } else {
+          this.flyToSuperMap(cur);
         }
       } else {
         this.$message({
@@ -300,6 +322,53 @@ export default {
         });
       }
     },
+    addGeoJson() {
+      let geoms = this.queryResultsGeom[this.activeLayerId];
+      geoms.forEach((geom) => {
+        loadGeoJSON(
+          geom,
+          "#0000ff",
+          { fill_a: 0.001 },
+          (data) => (data.name = "geoserver")
+        );
+      });
+    },
+    removeGeoJSON() {
+      viewer.entities.removeAll();
+      viewer.dataSources._dataSources.forEach((das) => {
+        if (das.name == "geoserver") viewer.dataSources.remove(das);
+      });
+    },
+    flyToSuperMap(cur) {
+      dataSourceLayer.entities.removeAll();
+      let parts = this.queryResultsGeomPart[this.activeLayerId];
+      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 = dataSourceLayer.entities.
+        let e = viewer.entities.add({
+          polyline: new Cesium.PolylineGraphics({
+            positions: Cesium.Cartesian3.fromDegreesArray(points),
+            width: 3,
+            material: Cesium.Color.RED.withAlpha(0.9),
+            clampToGround: true,
+          }),
+        });
+        viewer.flyTo(e);
+      }
+    },
     handleTabClick(item, a) {
       this.activeLayerId = item.name;
     },
@@ -324,6 +393,7 @@ export default {
       let scene = viewer.scene;
       viewer.entities.removeAll();
       dataSourceLayer.entities.removeAll();
+      this.removeGeoJSON();
       //拾取模型
       let pickedFeature = scene.pick(movement.position);
       if (
@@ -345,70 +415,70 @@ export default {
       // "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,'url----------',obj);
-          let str1 = eneityName.match(/@(\S*)#/)[1];
-          let str2 = eneityName.match(/(\S*)@/)[1];
-          let str3 = str1 + ":" + str2;
-          // let obj = store.state.vectorlayerlist.find(i => i.title == str1);
-          let obj = store.state.vectorlayerlist.find((i) => {
-            return str1 == i.title
-          });
-          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]);
-            that.layerList.push(obj);
-            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; p++) {
-                  if (store.state.vectorlayerlist[p].id == substring) {
-                    that.layerList.push(store.state.vectorlayerlist[p]);
-                    break;
-                  }
+        // let obj = store.state.vectorlayerlist[i];
+
+        // console.log(obj.url,'url----------',obj);
+        let str1 = eneityName.match(/@(\S*)#/)[1];
+        let str2 = eneityName.match(/(\S*)@/)[1];
+        let str3 = str1 + ":" + str2;
+        // let obj = store.state.vectorlayerlist.find(i => i.title == str1);
+        let obj = store.state.vectorlayerlist.find((i) => {
+          return str1 == i.title;
+        });
+        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]);
+          that.layerList.push(obj);
+          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; p++) {
+                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.queryResults[substring] = [cur];
+              that.queryResultsGeom[substring] = [];
+              that.activeLayerId = substring;
+            } else {
+              that.$message({
+                message: "查询结果为空！",
+                type: "warning",
+                customClass: "messageIndex",
+              });
             }
           }
+        }
         // }
       }
 
@@ -441,14 +511,15 @@ export default {
       //TODO wanger 分图层查询
       for (let i = 0; i < store.state.vectorlayerlist.length; i++) {
         let obj = store.state.vectorlayerlist[i];
-        if (!obj.source) {
-          continue;
-        }
         // 结果高亮
         this.highlightResultsPng(xy.lng, xy.lat);
-        if (obj.title == "测试WMS") {
+        if (obj.serverType == "geoserver") {
+          console.log("----", obj);
           this.getGeoserver(xy, obj);
         } else {
+          if (!obj.source) {
+            continue;
+          }
           this.superQuery(xy, obj);
         }
       }
@@ -561,37 +632,43 @@ export default {
       }
     },
     async getGeoserver(xy, obj) {
-      let url = "http://192.168.60.52:28085/geoserver/demo/wms";
+      // url: obj.url, //'http://192.168.60.52:28085/geoserver/gwc/service/wmts';
+console.log("---a--a--a-a")
+      this.queryResults[obj.id] = [];
+      this.queryResultsGeom[obj.id] = [];
+      let url = `${obj.url.substring(0, obj.url.indexOf("geoserver"))}/demo/wms`; //"http://192.168.60.52:28085/geoserver/wms";
       let params = {
-        SERVICE: "WMS",
-        VERSION: "1.1.1",
-        REQUEST: "GetFeatureInfo",
+        service: "WMS",
+        version: "1.1.1",
+        request: "GetFeatureInfo",
         // FORMAT: "image/png",
-        TRANSPARENT: true,
-        QUERY_LAYERS: "demo:yzq_czkfbj",
+        transparent: true,
+        query_layers: `${obj.fwgzkj}:${obj.fwmc}`,
         // STYLES: "",
-        LAYERS: "demo:yzq_czkfbj",
+        layers: `${obj.fwgzkj}:${obj.fwmc}`,
         // exceptions: "application/vnd.ogc.se_inimage",
-        INFO_FORMAT: "application/json",
+        info_format: "application/json",
         // FEATURE_COUNT: 50,
-        X: 50,
-        Y: 50,
-        SRS: "EPSG:4326",
-        WIDTH: 101,
-        HEIGHT: 101,
-        BBOX: bbox(xy, 10), // "12152284.626610054,2080930.4355590942,12153248.563804159,2081894.3727532008",
+        x: 19,
+        y: 174,
+        srs: "EPSG:4326",
+        width: 256,
+        height: 256,
+        bbox: bbox(xy, 10), // "12152284.626610054,2080930.4355590942,12153248.563804159,2081894.3727532008",
       };
       let res = await axios.get(url, { params });
       if (res.data && res.data.features.length > 0) {
         this.addLayerList(obj.title, obj);
-        that.queryResultsGeom[obj.id] = geoms;
         res.data.features.forEach((feitem) => {
           let cur = [];
-          cur.push({ name: feitem, value: feitem });
-          that.queryResults[obj.id].push(cur);
+          Object.keys(feitem.properties).forEach((key) => {
+            cur.push({ name: key, value: feitem.properties[key] });
+          });
+          this.queryResults[obj.id].push(cur);
+          this.queryResultsGeom[obj.id].push(feitem.geometry);
         });
       } else {
-        that.$message({
+        this.$message({
           message: "查询结果为空！",
           type: "warning",
           customClass: "messageIndex",
@@ -638,6 +715,7 @@ export default {
       this.layersData = [];
       viewer.entities.removeAll();
       dataSourceLayer.entities.removeAll();
+      this.removeGeoJSON();
       let title;
       if (store.state.checkedData) title = store.state.checkedData.title;
       //  超图分层分户
@@ -725,9 +803,12 @@ export default {
       this.queryResultsGeomPart = {};
       this.layerList = [];
       viewer.entities.removeAll();
-      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
-      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      if (this.handler.removeInputAction) {
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      }
       dataSourceLayer.entities.removeAll();
+      this.removeGeoJSON();
       viewer.dataSources.remove(dataSourceLayer);
     },
     /**

src/utils/MapHelper/help.js

@@ -223,4 +223,11 @@ export function bbox(latlng, zoom) {
   }
   // console.table({zoom,box,latlng,boxMin, boxMax })
   return `${boxMin.lng},${boxMin.lat},${boxMax.lng},${boxMax.lat}`
-}
+}
+
+export function str2Unicode(str) {
+  var es = [];
+  for (var i = 0; i < str.length; i++)
+    es[i] = ("00" + str.charCodeAt(i).toString(16)).slice(-4);
+  return "\\u" + es.join("\\u");
+}