geoserver wms加载

src/components/Combinations/LayerManage/LayerManage.vue

@@ -1,8 +1,14 @@
 <template>
   <div>
-    <layer-manage-split :addlayerdata="addlayerdata" @visibleChange="visibleChange"
-      @transSliderChange="transSliderChange" @handleCheckChange="handleCheckChange" @location="location" @raise="raise"
-      @lower="lower"></layer-manage-split>
+    <layer-manage-split
+      :addlayerdata="addlayerdata"
+      @visibleChange="visibleChange"
+      @transSliderChange="transSliderChange"
+      @handleCheckChange="handleCheckChange"
+      @location="location"
+      @raise="raise"
+      @lower="lower"
+    ></layer-manage-split>
     <LayerLegend></LayerLegend>
   </div>
 </template>
@@ -203,13 +209,49 @@ export default {
       );
       viewer.flyTo(layer);
     },
+    addWMS(obj) {
+      let layer = viewer.imageryLayers.addImageryProvider(
+        new Cesium.WebMapServiceImageryProvider({
+          url: obj.url, // "http://192.168.60.52:28085/geoserver/wms",
+          layers: "demo:yzq_czkfbj", //"demo:Ahtq_czkfbj",
+          parameters: {
+            service: "WMS",
+            format: "image/png",
+            transparent: true,
+            // srs: "EPSG:4326", // 坐标参考系统，可以根据需要更改
+          },
+        })
+      );
+      return layer;
+    },
+    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图层名称
+          style: "", // 替换为你的WMTS图层风格
+          tileMatrixSetID: "WebMercatorQuadx2", // 或者其他的EPSG代码
+          format: "image/png",
+          tilingScheme: new Cesium.WebMercatorTilingScheme(), // 当想要加载EPSG:4326瓦片服务时，只需要创建一个GeographicTilingScheme对象即可
+          maximumLevel: 18, // 根据实际情况设置最大级别
+        })
+      );
+    },
+    addArcGis(obj) {
+      let layer = viewer.imageryLayers.addImageryProvider(
+        new Cesium.ArcGisMapServerImageryProvider({
+          url: "http://192.168.60.20:6080/arcgis/rest/services/150500/DLTB00_2019/MapServer?f=jsapi",
+        })
+      );
+      viewer.flyTo(layer);
+    },
 
     promiseWhen(promiseArray, sceneName, obj) {
       let this_ = this;
       Cesium.when.all(
         promiseArray,
         (layers) => {
-          console.log(layers, 'layerslayers')
+          console.log(layers, "layerslayers");
           this_.sceneLayers[obj.title] = layers;
           // if (sceneName) {
           //   this.flyTo(sceneName);
@@ -234,10 +276,10 @@ export default {
               let style = new Cesium.Style3D();
               style.bottomAltitude = window.modelBottomAltitude; //底部高度
               item.style3D = style;
-              item.brightness = 1.2
-              item.contrast = 1.2
-              item.saturation = 1.2
-              item.gamma = 1.1
+              item.brightness = 1.2;
+              item.contrast = 1.2;
+              item.saturation = 1.2;
+              item.gamma = 1.1;
             }
             if (
               item.name.indexOf("雨水") > -1 ||
@@ -296,112 +338,116 @@ export default {
         obj.trans = 100;
         obj.visible = true;
         this.addlayerdata.push(obj);
-        switch (obj.type) {
-          case "S3M": //场景
-            let s = viewer.scene.open(obj.url, undefined, {
-              autoSetView: false, // obj.title != "倾斜摄影",
-            });
-            this.vectorlayerlist.push(obj);
-            this.promiseWhen([s], undefined, obj);
-            this.bus.$emit("setDepthAgainst", true);
-            if (
-              obj.title.indexOf("雨水") > -1 ||
-              obj.title.indexOf("管线") > -1
-            ) {
-              console.log(obj.checked, 'obj.checked')
-              this.bus.$emit("setnUderground", obj.checked)
-            }
+        if (obj.title == "测试WMS") {
+          this.layerparams[obj.id] = this.addWMS(obj);
+          store.setlayerparamsList(this.layerparams);
+        } else if (obj.title == "测试WMTS") {
+          this.addWMTS(obj);
+        } else {
+          switch (obj.type) {
+            case "S3M": //场景
+              let s = viewer.scene.open(obj.url, undefined, {
+                autoSetView: false, // obj.title != "倾斜摄影",
+              });
+              this.vectorlayerlist.push(obj);
+              this.promiseWhen([s], undefined, obj);
+              this.bus.$emit("setDepthAgainst", true);
+              if (
+                obj.title.indexOf("雨水") > -1 ||
+                obj.title.indexOf("管线") > -1
+              ) {
+                console.log(obj.checked, "obj.checked");
+                this.bus.$emit("setnUderground", obj.checked);
+              }
 
-            // store.setModelLayerList(this.vectorlayerlist);
-            // console.log(store.state.modellayerlist,'vvvvv');
-            // store.state.S3MList.push(obj)
-            break;
-          case "S3MDATA": //scp
-            viewer.scene.addS3MTilesLayerByScp(obj.url, {
-              name: obj.title,
-            });
-            break;
-          case "3DTiles": //tileset
-            this.add3DTiles(obj);
-            this.vectorlayerlist.push(obj);
-            break;
-          case "IMG": //影像
-            let layer = viewer.imageryLayers.addImageryProvider(
-              new Cesium.SuperMapImageryProvider({
-                url: obj.url,
+              // store.setModelLayerList(this.vectorlayerlist);
+              // console.log(store.state.modellayerlist,'vvvvv');
+              // store.state.S3MList.push(obj)
+              break;
+            case "S3MDATA": //scp
+              viewer.scene.addS3MTilesLayerByScp(obj.url, {
                 name: obj.title,
-              })
-            );
-            this.layerparams[obj.id] = layer;
-            store.setlayerparamsList(this.layerparams);
-            if (type == "roller")
-              this.bus.$emit("setImageryRoller", layer, splitId);
-            // viewer.flyTo(layer);
-            break;
-          case "Vector": //矢量
-            // let provider = new Cesium.SuperMapImageryProvider({
-            //   url: obj.url,
-            //   name: obj.title,
-            // })
-            // let layer2 = viewer.imageryLayers.addImageryProvider(
-            //   provider
-            // );
+              });
+              break;
+            case "3DTiles": //tileset
+              this.add3DTiles(obj);
+              this.vectorlayerlist.push(obj);
+              break;
+            case "IMG": //影像
+              let layer = viewer.imageryLayers.addImageryProvider(
+                new Cesium.SuperMapImageryProvider({
+                  url: obj.url,
+                  name: obj.title,
+                })
+              );
+              this.layerparams[obj.id] = layer;
+              store.setlayerparamsList(this.layerparams);
+              if (type == "roller")
+                this.bus.$emit("setImageryRoller", layer, splitId);
+              // viewer.flyTo(layer);
+              break;
+            case "Vector": //矢量
+              // let provider = new Cesium.SuperMapImageryProvider({
+              //   url: obj.url,
+              //   name: obj.title,
+              // })
+              // let layer2 = viewer.imageryLayers.addImageryProvider(
+              //   provider
+              // );
 
-            // var params = [{
-            //   layerName: 'YJJBNTBHTB@YJJBNTBH',
-            //   isVisible: true,
-            //   displayFilter: "xzqdm='460205000003'"
-            // }
-            // ]
-            // provider.setLayerStatusParameters(params)
+              // var params = [{
+              //   layerName: 'YJJBNTBHTB@YJJBNTBH',
+              //   isVisible: true,
+              //   displayFilter: "xzqdm='460205000003'"
+              // }
+              // ]
+              // provider.setLayerStatusParameters(params)
 
-            // let layer2 = viewer.imageryLayers.addImageryProvider(
-            //   new Cesium.SuperMapImageryProvider({
-            //     url: obj.url,
-            //     name: obj.title,
-            //   })
-            // );
+              // let layer2 = viewer.imageryLayers.addImageryProvider(
+              //   new Cesium.SuperMapImageryProvider({
+              //     url: obj.url,
+              //     name: obj.title,
+              //   })
+              // );
 
-            // var provider = new Cesium.SuperMapImageryProvider({ url: 'http://192.168.60.3:8099/iserver/services/map-GuiHuaDiKuai/rest/maps/GHDK%40%E8%A7%84%E5%88%92%E5%9C%B0%E5%9D%97' });
-            // var layer2 = viewer.imageryLayers.addImageryProvider(provider);
-            // var params = [
-            //  {
-            //     layerName: 'GHDK@规划地块',
-            //     isVisible: true,
-            //     displayFilter: "XZQDM LIKE '460203%' and PFSJ < '20190808'"
-            //   }
-            // ]
-            // provider.setLayerStatusParameters(params)
+              // var provider = new Cesium.SuperMapImageryProvider({ url: 'http://192.168.60.3:8099/iserver/services/map-GuiHuaDiKuai/rest/maps/GHDK%40%E8%A7%84%E5%88%92%E5%9C%B0%E5%9D%97' });
+              // var layer2 = viewer.imageryLayers.addImageryProvider(provider);
+              // var params = [
+              //  {
+              //     layerName: 'GHDK@规划地块',
+              //     isVisible: true,
+              //     displayFilter: "XZQDM LIKE '460203%' and PFSJ < '20190808'"
+              //   }
+              // ]
+              // provider.setLayerStatusParameters(params)
 
-            let layer2 = viewer.imageryLayers.addImageryProvider(
-              new Cesium.SuperMapImageryProvider({
-                url: obj.url,
-                name: obj.title,
-              })
-            );
+              let layer2 = viewer.imageryLayers.addImageryProvider(
+                new Cesium.SuperMapImageryProvider({
+                  url: obj.url,
+                  name: obj.title,
+                })
+              );
 
-            this.vectorlayerlist.push(obj);
-            this.layerparams[obj.id] = layer2;
-            store.setlayerparamsList(this.layerparams);
-            if (type == "roller")
-              this.bus.$emit("setImageryRoller", layer2, splitId);
-            // viewer.flyTo(layer2);
-            break;
-          case "Terrain": //地形
-            this.addTerrain(obj.url);
-            break;
-          default:
-            null;
+              this.vectorlayerlist.push(obj);
+              this.layerparams[obj.id] = layer2;
+              store.setlayerparamsList(this.layerparams);
+              if (type == "roller")
+                this.bus.$emit("setImageryRoller", layer2, splitId);
+              // viewer.flyTo(layer2);
+              break;
+            case "Terrain": //地形
+              this.addTerrain(obj.url);
+              break;
+            default:
+              null;
+          }
         }
         if (type == "split")
           this.bus.$emit("setImagerySplit", obj, obj.checked, splitId, true);
       } else {
-        if (
-          obj.title.indexOf("雨水") > -1 ||
-          obj.title.indexOf("管线") > -1
-        ) {
-          console.log(obj.checked, 'obj.checked')
-          this.bus.$emit("setnUderground", obj.checked)
+        if (obj.title.indexOf("雨水") > -1 || obj.title.indexOf("管线") > -1) {
+          console.log(obj.checked, "obj.checked");
+          this.bus.$emit("setnUderground", obj.checked);
         }
         for (let i = 0; i < this.addlayerdata.length; i++) {
           if (this.addlayerdata[i].title == obj.title) {
@@ -495,22 +541,15 @@ export default {
           viewer.flyTo(this.sceneLayers[obj.title]);
           break;
         case "IMG": //影像
-          for (let i = 0; i < imageryLayers._layers.length; i++) {
-            let element = imageryLayers._layers[i];
-            if (element._imageryProvider._name == obj.title) {
-              viewer.flyTo(element);
-              break;
-            }
-          }
-          break;
         case "Vector": //矢量
-          for (let i = 0; i < imageryLayers._layers.length; i++) {
-            let element = imageryLayers._layers[i];
-            if (element._imageryProvider._name == obj.title) {
-              viewer.flyTo(element);
-              break;
-            }
-          }
+          viewer.flyTo(this.layerparams[obj.id]);
+          // for (let i = 0; i < imageryLayers._layers.length; i++) {
+          //   let element = imageryLayers._layers[i];
+          //   if (element._imageryProvider._name == obj.title) {
+          //     viewer.flyTo(element);
+          //     break;
+          //   }
+          // }
           break;
         case "Terrain": //地形
           viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider(
@@ -579,24 +618,6 @@ export default {
 
   mounted() {
     this.bus.$on("checkedChange", this.checkedChange);
-    setTimeout(() => {
-      //   const wmsImageryLayer = new Cesium.WebMapServiceImageryProvider({
-      //     url: "http://192.168.60.2:8080/geoserver/sanya_workspace/wms",
-      //     layers: "sanya:TB_GHDK_SITUATION",
-      //     parameters: {
-      //       service: "WMS",
-      //       format: "image/png",
-      //     },
-      //   });
-      //   let layer = viewer.imageryLayers.addImageryProvider(wmsImageryLayer);
-      //   console.log("----", layer);
-      //   // viewer.flyTo(layer);
-      // const terrainP = new Cesium.ArcGisMapServerImageryProvider({
-      //   url: "http://192.168.60.20:6080/arcgis/rest/services/150500/DLTB00_2019/MapServer?f=jsapi",
-      // });
-      // let layer = viewer.imageryLayers.addImageryProvider(terrainP);
-      // viewer.flyTo(layer);
-    }, 100);
   },
 
   watch: {},