src/api/gis/service.js

@@ -0,0 +1,169 @@
+import axios from "axios";
+
+/**
+ * @description:加载WMS服务
+ * @param map 
+ * @param url String
+ * @param option Object 
+ * 
+ */
+export function loadWMS(map,url,option){
+   if(url) {
+    let id=url.split('layer=')[1]
+    console.log(id,'新增的图层id')
+    map.addSource(option.source,{
+        'id':option.id,
+        'type':'raster',
+        'tiles':[url],
+        'tileSize':512
+      })
+    map.addLayer({
+        'id':id,
+        'type':option.type,
+        'source':option.source,
+        'paint':option.paint
+      })
+     
+   }else{
+       alert('请输入WMS服务地址!')
+   }
+ 
+}
+
+/**
+ * @description:根据id删除指定图层
+ * @param  map 
+ * @param  url 
+ */
+export function removeLayer(map,url,option){
+    console.log(url,'地址')
+    let id=url.split('layer=')[1]
+    console.log(id,'移除的id')
+    map.removeLayer(id)
+    map.removeSource(id)
+}
+
+/**
+ * @description:移除WFS服务图层
+ * @param {*} map 
+ * @param {*} url 
+ * @param {*} option 
+ */
+export function removeWFSLayer(map,option){
+    map.removeLayer(option.id)
+    map.removeSource(option.id)
+}
+/**
+ * @description:加载WFS服务
+ * @param url String
+ * @param option Object 
+ */
+ export function loadWFSLayer(map,url,option){
+     if(url){
+        axios.get(url).then((res) => {
+    
+            let features = res.data.features;
+            // console.log(features, "元素层");
+            // let layerType = null;
+            // let geometryType = features[0].geometry.type;
+            let addLayerOption = {
+              id: option.id,
+              type: option.type,
+              source: {
+                type: "geojson",
+                data: {
+                  type: "FeatureCollection",
+                  features: features,
+                },
+              },
+              layout: {
+                visibility: "visible",
+              },
+              paint:option.paint
+            };
+            // if (geometryType == "MultiLineString") {
+            //   addLayerOption.type = "line";
+            // } else if (geometryType == "Line") {
+            //   addLayerOption.type = "line";
+            // } else if (geometryType == "Point") {
+            //   addLayerOption.type = "circle";
+            // } else if (geometryType == " MultiPoint") {
+            //   addLayerOption.type = "circle";
+            // } else if (geometryType == "Polygon") {
+            //   addLayerOption.type = "fill";
+            //   addLayerOption.paint = {
+            //     "fill-color": "rgba(200,100,240,0.4)",
+            //     "fill-outline-color": "rgba(200,100,240,1)",
+            //   };
+            // } else if (geometryType == "MultiPolygon") {
+            //   addLayerOption.type = "fill";
+            //   addLayerOption.paint = {
+            //     "fill-color": "rgba(200,100,240,0.4)",
+            //     "fill-outline-color": "rgba(200,100,240,1)",
+            //   };
+            // }
+           
+              map.addLayer(addLayerOption);
+            
+          });
+     }else{
+         alert('请输入WFS地址!')
+     }
+   
+}
+
+/**
+ * @description:加载WMTS服务
+ * @param map
+ * @param url String
+ * @param option Object 
+ */
+ export function loadWMTS(map,url,option){
+     if(url){
+       
+        let id=url.split('layer=')[1]
+        map.addSource(option.source,{
+            'type':'raster',
+            'tiles':[url],
+    
+            'tileSize':256
+        })
+        map.addLayer({
+            'id':id,
+            'type':option.type,
+            'source':option.source,
+            'paint':option.paint
+        })
+     }else{
+         alert('请输入WMTS服务地址!')
+     }
+   
+}
+
+/**
+ * @description:加载TMS服务
+ * @param map 
+ * @param url String
+ * @param option Object 
+ */
+ export function loadTMSLayer(map,url,option){
+     if(url){
+        let id=url.split('layer=')[1]
+        map.addSource(option.source,{
+            'type':'raster',
+            'tiles':[url],
+    
+            'tileSize':256
+        })
+        map.addLayer({
+            'id':id,
+            'type':option.type,
+            'source':option.source,
+            'paint':option.paint
+        })
+     }else{
+        alert('请输入TMS服务地址!')
+     }
+   
+}
+

src/views/dashboard/index.vue

@@ -4,50 +4,148 @@
     <!-- 按钮控制区 -->
     <div class="btns">
       <button @click="loadWFS()">WFS服务</button>
+      <button @click="removeWFSLayer()">移除wFS服务图层</button>
       <button @click="loadWMS()">WMS服务</button>
+      <button @click="removeWMSLayer()">移除WMS服务图层</button>
       <button @click="loadWMTS()">WMTS服务</button>
+      <button @click="removeWMTSLayer()">移除WMTS服务图层</button>
       <button @click="loadTMS()">TMS服务</button>
+      <button @click="removeTMSLayer()">移除TMS服务图层</button>
     </div>
-    <Service ref="service"/>
+    <div id="map"></div>
+    <!-- <Service ref="service"/> -->
   </div>
 </template>
 
 <script>
-import { useRouter } from 'vue-router'
+import { useRouter } from "vue-router";
-import Service from '../../examples/service.vue'
+import Service from "../../examples/service.vue";
+import {
+  loadWMS,
+  removeLayer,
+  loadWMTS,
+  loadWFSLayer,
+  loadTMSLayer,
+  removeWFSLayer
+} from "@/api/gis/service.js";
 export default {
-  name: 'HomePage',
+  name: "HomePage",
   components: {
-     Service
+    Service,
+  },
+  data() {
+    return {
+      map: null,
+    };
   },
   setup(props) {
-    const router = useRouter()
+    const router = useRouter();
     function toSystem() {
-      router.push({ path: '/login' })
+      router.push({ path: "/login" });
     }
     return {
-      toSystem
+      toSystem,
-    }
+    };
   },
   mounted() {
-     
+    this.initMap();
   },
   methods: {
+    initMap() {
+      this.map = new mapboxgl.Map({
+        container: "map",
+        center: [120.476913, 31.416667],
+        zoom: 5,
+        style: {
+          version: 8,
+          name: "Mapbox Streets",
+          sources: {
+            "osm-tiles": {
+              type: "raster",
+              tiles: ["http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"],
+
+              tileSize: 256,
+            },
+          },
+          layers: [
+            {
+              id: "123",
+              type: "raster",
+              source: "osm-tiles",
+              "source-layer": "osmtiles",
+            },
+          ],
+        },
+        // style:normal_style
+      });
+    },
     loadWFS() {
-       this.$refs.service.loadWFS()
+      let url='http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_china_mb_china_poi&outputFormat=application/json'
+      let option = {id:'point',type:'circle',paint:{}};
+      loadWFSLayer(this.map, url, option);
+     
+    },
+    removeWFSLayer(){
+        let option = {id:'point',type:'circle',paint:{}};
+      
+      removeWFSLayer(this.map,option)
    },
     loadWMS() {
-       let wmsUrl='http://192.168.11.35:8999/geoserver/ows?service=WMS&version=1.3.0&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=sz_pg%3Asz_pg_mb_building_area'
+      let url =
-       this.$refs.service.loadWMS(wmsUrl)
+        "http://192.168.11.35:8999/geoserver/ows?service=WMS&version=1.3.0&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=sz_pg%3Asz_pg_china_mb_china_poi";
+      let option = {
+        id: "wms-layer",
+        sourceId:'wms-sourceId',
+        type: "raster",
+        source: "wms-source",
+        paint: {},
+      };
+
+      loadWMS(this.map, url, option);
+    },
+    removeWMSLayer() {
+      let url =
+        "http://192.168.11.35:8999/geoserver/ows?service=WMS&version=1.3.0&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=sz_pg%3Asz_pg_china_mb_china_poi";
+         let option = {
+        id: "wms-layer",
+        sourceId:'wms-sourceId',
+        type: "raster",
+        source: "wms-source",
+        paint: {},
+      };
+     removeLayer(this.map, url,option);
     },
     loadWMTS() {
-       this.$refs.service.loadWMTS()
+      let url = 
+        "http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs"
+      ;
+      let option = {
+        id: "wmts-layer",
+        type: "raster",
+        source: "wmts-source",
+        paint: { "raster-opacity": 0.8 },
+      };
+
+      loadWMTS(this.map, url, option);
+    },
+    removeWMTSLayer(){
+         let url = 
+        "http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs"
+      ;
+       removeLayer(this.map, url);
     },
     loadTMS() {
-       this.$refs.service.loadTMS()
+      let url;
-     }
+      let option = {};
-  }
+      loadTMSLayer(this.map, url, option);
+    },
+    removeTMSLayer(){
+      let url;
+    
+       removeLayer(this.map, url);
     }
+  },
+};
 </script>
 <style lang="scss" scoped>
 .content {
@@ -69,7 +167,10 @@ export default {
       margin-right: 10px;
     }
   }
+  #map {
+    width: 100%;
+    height: 100%;
+  }
 }
-
 </style>