WMS数据查询

src/components/Combinations/LayerManage/LayerManage.vue

@@ -227,8 +227,8 @@ export default {
     addWMTS(obj) {
       return viewer.imageryLayers.addImageryProvider(
         new Cesium.WebMapTileServiceImageryProvider({
-          url: obj.url, //"http://192.168.60.52:28085/geoserver/gwc/service/wmts";
-          layer: "demo:dltbgroup", // 替换为你的WMTS图层名称
+          url: obj.url, //'http://192.168.60.52:28085/geoserver/gwc/service/wmts';
+          layer: "demo:czkfbj", // 替换为你的WMTS图层名称
           style: "", // 替换为你的WMTS图层风格
           tileMatrixSetID: "WebMercatorQuadx2", // 或者其他的EPSG代码
           format: "image/png",

src/components/Query/clickQuery/clickQuery.vue

@@ -103,6 +103,7 @@ 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";
+import { bbox } from "@/utils/MapHelper/help.js";
 let gwtype;
 let query_click = null;
 let manager_layer_png = null;
@@ -462,118 +463,165 @@ export default {
         }
       });
     },
-    async pickPosition(movement) {
-      let that = this;
+    pickPosition(movement) {
       //拾取图层
       // 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);
+      let xy = this.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
-          );
+        // 结果高亮
+        this.highlightResultsPng(xy.lng, xy.lat);
+        if (obj.title == "测试WMS") {
+          this.getGeoserver(xy, obj);
         } else {
-          e = await that.mapQuery(
-            that.calcIserverURI(obj.url),
-            queryByIDParameters
-          );
+          this.superQuery(xy, obj);
         }
+      }
+    },
+    async superQuery(xy, obj) {
+      let that = this;
+      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;
 
-        // 结果高亮
-
-        this.highlightResultsPng(xy.lng, xy.lat);
-        if (e && e.totalCount > 0) {
-          that.layerList.push(store.state.vectorlayerlist[i]);
-          let queryData = [];
-          let geoms = [];
-          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 });
+      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) {
+        this.addLayerList(obj.title, obj);
+        let queryData = [];
+        let geoms = [];
+        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;
                 }
-              });
-            } 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];
+                cur.push({ name: fieldName, value: v, order });
               }
-              points.push([c.x, c.y]);
-            }
-            parts.push(e.features[u].geometry.parts);
-            geoms.push(points);
-            queryData.push(cur);
+            });
+          } 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;
+      this.setactiveLayerId();
+    },
+    setactiveLayerId() {
+      if (this.layerList.length > 0) {
+        this.activeLayerId = this.layerList[0].id;
+      } else {
+        this.$message({
+          message: "查询结果为空！",
+          type: "warning",
+          customClass: "messageIndex",
+        });
+      }
+    },
+    async getGeoserver(xy, obj) {
+      let url = "http://192.168.60.52:28085/geoserver/demo/wms";
+      let params = {
+        SERVICE: "WMS",
+        VERSION: "1.1.1",
+        REQUEST: "GetFeatureInfo",
+        // FORMAT: "image/png",
+        TRANSPARENT: true,
+        QUERY_LAYERS: "demo:yzq_czkfbj",
+        // STYLES: "",
+        LAYERS: "demo:yzq_czkfbj",
+        // exceptions: "application/vnd.ogc.se_inimage",
+        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",
+      };
+      let res = await axios.get(url, { params });
+      console.log("---res", res);
+      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);
+        });
       } else {
         that.$message({
           message: "查询结果为空！",
@@ -581,6 +629,8 @@ export default {
           customClass: "messageIndex",
         });
       }
+
+      this.setactiveLayerId();
     },
     highlightResultsPng(longitude, latitude) {
       manager_layer_png.entities.add({
@@ -597,14 +647,18 @@ export default {
         },
       });
     },
-    addLayerList(label) {
+    addLayerList(label, obj) {
       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]);
+      if (obj) {
+        this.layerList.push(obj);
+      } else {
+        let layers = store.state.vectorlayerlist.filter(
+          (element) => element.label === label
+        );
+        if (layers.length > 0) {
+          this.activeLayerId = layers[0].id;
+          this.layerList.push(layers[0]);
+        }
       }
     },
     /**

src/utils/MapHelper/help.js

@@ -135,4 +135,31 @@ function drawLegends(canvas, ctx) {
       lineHeight
     );
   });
+}
+
+/**
+*计算用户坐标应该减去的差值
+*/
+function getZoomBbox(zoom) {
+  let level0 = 142.03125
+  let box = level0 / Math.pow(2, zoom)
+  box = box / 2
+  return box
+}
+
+/**
+*根据用户点击的坐标计算 bbox参数
+*/
+export function bbox(latlng, zoom) {
+  let box = getZoomBbox(zoom)
+  let boxMin = {
+    lat: latlng.lat - box,
+    lng: latlng.lng - box
+  }
+  let boxMax = {
+    lat: latlng.lat + box,
+    lng: latlng.lng + box
+  }
+  // console.table({zoom,box,latlng,boxMin, boxMax })
+  return `${boxMin.lng},${boxMin.lat},${boxMax.lng},${boxMax.lat}`
 }