src/api/gis/service.js

@@ -10,11 +10,9 @@ import axios from 'axios'
 export function loadWMS(map, url, option) {
   if (url) {
     const id = url.split('layer=')[1]
-    const source = map.getSource(option.source)
+    console.log(id, '新增的图层id')
-    const layer = map.getLayer(option.id)
-    if (source == undefined && layer == undefined) {
     map.addSource(option.source, {
-
+      id: option.id,
       type: 'raster',
       tiles: [url],
       tileSize: 512
@@ -25,9 +23,6 @@ export function loadWMS(map, url, option) {
       source: option.source,
       paint: option.paint
     })
-    } else {
-      alert('该图层已存在!请勿重复添加。')
-    }
   } else {
     alert('请输入WMS服务地址!')
   }
@@ -39,10 +34,11 @@ export function loadWMS(map, url, option) {
  * @param  url
  */
 export function removeLayer(map, url, option) {
+  console.log(url, '地址')
   const id = url.split('layer=')[1]
-
+  console.log(id, '移除的id')
   map.removeLayer(id)
-  map.removeSource(option.source)
+  map.removeSource(id)
 }
 
 /**
@@ -61,9 +57,6 @@ export function removeWFSLayer(map, option) {
  * @param option Object
  */
 export function loadWFSLayer(map, url, option) {
-  const source = map.getSource(option.id)
-  const layer = map.getLayer(option.id)
-  if (source == undefined && layer == undefined) {
   if (url) {
     axios.get(url).then((res) => {
       const features = res.data.features
@@ -112,9 +105,6 @@ export function loadWFSLayer(map, url, option) {
   } else {
     alert('请输入WFS地址!')
   }
-  } else {
-    alert('该图层已存在!请勿重复添加')
-  }
 }
 
 /**
@@ -124,9 +114,6 @@ export function loadWFSLayer(map, url, option) {
  * @param option Object
  */
 export function loadWMTS(map, url, option) {
-  const source = map.getSource(option.source)
-  const layer = map.getLayer(option.id)
-  if (source == undefined && layer == undefined) {
   if (url) {
     const id = url.split('layer=')[1]
     map.addSource(option.source, {
@@ -144,9 +131,6 @@ export function loadWMTS(map, url, option) {
   } else {
     alert('请输入WMTS服务地址!')
   }
-  } else {
-    alert('该图层已存在!请勿重复添加。')
-  }
 }
 
 /**

src/components/PositionMatching/index.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="content">
-    <img src="@/assets/img/location.png">
-    <input type="text"
-           placeholder="请输入搜索位置/坐标">
-    <img src="@/assets/img/search.png"
-         @click="showList()">
-  </div>
-  <div ref="locationList"
-       class="locationList" />
-</template>
-
-<script>
-export default {
-  methods: {
-    showList () {
-      if (this.$refs.locationList.className == 'locationList  my-click-transition') {
-        this.$refs.locationList.className = 'locationList'
-      } else {
-        this.$refs.locationList.className = 'locationList  my-click-transition'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.content {
-  width: 300px;
-  height: 45px;
-  padding: 10px 10px;
-  background-color: rgba(245, 245, 245, 0.8);
-  box-shadow: 0px 15px 10px -15px #565656;
-  display: flex;
-  justify-content: space-between;
-
-  input {
-    padding-left: 10px;
-  }
-}
-// 位置列表
-.locationList {
-  margin-top: 5px;
-  width: 300px;
-  height: 100px;
-  background-color: pink;
-  transform: scale(0.5, 0.5);
-  opacity: 0;
-  transition: transform 0.5s linear, opacity 0.5s linear;
-}
-.my-click-transition {
-  opacity: 1;
-  transform: scale(1, 1);
-}
-</style>

src/examples/service.vue

@@ -1,102 +1,103 @@
 <template>
-  <div id="map"
+  <div class="content" id="map"></div>
-       class="content" />
 </template>
 
 <script>
-import normal_style from '../assets/js/normal_style.js'
+import normal_style from "../assets/js/normal_style.js";
-import axios from 'axios'
+import axios from "axios";
 export default {
   data() {
     return {
-      map: null
+      map: null,
-    }
+    };
   },
   mounted() {
-    this.initMap()
+    this.initMap();
   },
   methods: {
     initMap() {
-      const that = this
+      let that = this;
       that.map = new mapboxgl.Map({
-        container: 'map',
+        container: "map",
         center: [120.476913, 31.416667],
         zoom: 5,
         style: {
           version: 8,
-          name: 'Mapbox Streets',
+          name: "Mapbox Streets",
           sources: {
-            'osm-tiles': {
+            "osm-tiles": {
-              type: 'raster',
+              type: "raster",
-              tiles: ['http://c.tile.openstreetmap.org/{z}/{x}/{y}.png'],
+              tiles: ["http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"],
 
-              tileSize: 256
+              tileSize: 256,
-            }
+            },
           },
           layers: [
             {
-              id: '123',
+              id: "123",
-              type: 'raster',
+              type: "raster",
-              source: 'osm-tiles',
+              source: "osm-tiles",
-              'source-layer': 'osmtiles'
+              "source-layer": "osmtiles",
-            }
+            },
-          ]
+          ],
-        }
+        },
          // style:normal_style
-      })
+      });
+      
     },
     loadWFS(url,option){
          var geoJsonUrl =
-        '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'
+        "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";
       //线 var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_bg_line&outputFormat=application/json'
       // var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_admin&outputFormat=application/json';
       // var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_road&outputFormat=application/json';
       // var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_label&outputFormat=application/json';
       //var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_label&outputFormat=application/json';
       axios.get(geoJsonUrl).then((res) => {
-        console.log(res)
+        console.log(res);
-        const features = res.data.features
+        let features = res.data.features;
-        console.log(features, '元素层')
+        console.log(features, "元素层");
-        const layerType = null
+        let layerType = null;
-        const geometryType = features[0].geometry.type
+        let geometryType = features[0].geometry.type;
-        const addLayerOption = {
+        let addLayerOption = {
-          id: 'points',
+          id: "points",
           type: layerType,
           source: {
-            type: 'geojson',
+            type: "geojson",
             data: {
-              type: 'FeatureCollection',
+              type: "FeatureCollection",
-              features: features
+              features: features,
-            }
+            },
           },
           layout: {
-            visibility: 'visible'
+            visibility: "visible",
-          }
+          },
-        }
+        };
-        if (geometryType == 'MultiLineString') {
+        if (geometryType == "MultiLineString") {
-          addLayerOption.type = 'line'
+          addLayerOption.type = "line";
-        } else if (geometryType == 'Line') {
+        } else if (geometryType == "Line") {
-          addLayerOption.type = 'line'
+          addLayerOption.type = "line";
-        } else if (geometryType == 'Point') {
+        } else if (geometryType == "Point") {
-          addLayerOption.type = 'circle'
+          addLayerOption.type = "circle";
-        } else if (geometryType == ' MultiPoint') {
+        } else if (geometryType == " MultiPoint") {
-          addLayerOption.type = 'circle'
+          addLayerOption.type = "circle";
-        } else if (geometryType == 'Polygon') {
+        } else if (geometryType == "Polygon") {
-          addLayerOption.type = 'fill'
+          addLayerOption.type = "fill";
           addLayerOption.paint = {
-            'fill-color': 'rgba(200,100,240,0.4)',
+            "fill-color": "rgba(200,100,240,0.4)",
-            'fill-outline-color': 'rgba(200,100,240,1)'
+            "fill-outline-color": "rgba(200,100,240,1)",
-          }
+          };
-        } else if (geometryType == 'MultiPolygon') {
+        } else if (geometryType == "MultiPolygon") {
-          addLayerOption.type = 'fill'
+          addLayerOption.type = "fill";
           addLayerOption.paint = {
-            'fill-color': 'rgba(200,100,240,0.4)',
+            "fill-color": "rgba(200,100,240,0.4)",
-            'fill-outline-color': 'rgba(200,100,240,1)'
+            "fill-outline-color": "rgba(200,100,240,1)",
-          }
+          };
         }
        
-        this.map.addLayer(addLayerOption)
+          this.map.addLayer(addLayerOption);
-      })
+        
+      });
     },
     loadWMS(url,option){
      console.log('111')
@@ -112,8 +113,11 @@ export default {
          'source':'wms-source',
          'paint':{}
        })
+     
     },
     loadWMTS(url,option){
+      
+     
             this.map.addSource('wmts-source',{
                 'type':'raster',
                 'tiles':['http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs'],
@@ -128,10 +132,12 @@ export default {
                     'raster-opacity':0.8
                 }
             })
+        
     },
     loadTMS(url,option){
        var tmsUrl='http://192.168.11.35:8999/geoserver/gwc/service/tms/1.0.0/sz_pg%3Asz_pg_mb@EPSG%3A900913@pbf'
        
+         
           this.map.addLayer({
             'id':'tms-layer',
             'type':'raster',
@@ -141,9 +147,10 @@ export default {
             }
            
           })
+        
     }
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/views/dashboard/index.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="content">
-    <!-- <div class="changeServe">
-      <div class="serveTitle">加载服务&nbsp;:</div>
-    </div> -->
     <div class="btns">
       <button @click="loadWFS()">WFS服务</button>
       <button @click="removeWFSLayer()">移除wFS服务图层</button>
@@ -15,15 +12,12 @@
       <button @click="transform()">坐标转换</button>
     </div>
     <div id="map" />
-    <div class="fitchLocation">
-      <position-matching />
-    </div>
   </div>
 </template>
 
 <script>
 import { useRouter } from 'vue-router'
-import PositionMatching from '../../components/PositionMatching/index.vue'
+
 import {
   loadWMS,
   removeLayer,
@@ -36,7 +30,7 @@ import Transform from '@/api/gis/coordinate-conversion.js'
 export default {
   name: 'HomePage',
   components: {
-    PositionMatching
+
   },
   setup (props) {
     const router = useRouter()
@@ -186,10 +180,5 @@ export default {
     width: 100%;
     height: 100%;
   }
-  .fitchLocation {
-    position: absolute;
-    right: 30px;
-    top: 20px;
-  }
 }
 </style>