服务文件

src/api/gis/service.js

@@ -10,19 +10,24 @@ import axios from 'axios'
 export function loadWMS(map, url, option) {
   if (url) {
     const id = url.split('layer=')[1]
-    console.log(id, '新增的图层id')
+    const source = map.getSource(option.source)
-    map.addSource(option.source, {
+    const layer = map.getLayer(option.id)
-      id: option.id,
+    if (source == undefined && layer == undefined) {
-      type: 'raster',
+      map.addSource(option.source, {
-      tiles: [url],
+
-      tileSize: 512
+        type: 'raster',
-    })
+        tiles: [url],
-    map.addLayer({
+        tileSize: 512
-      id: id,
+      })
-      type: option.type,
+      map.addLayer({
-      source: option.source,
+        id: id,
-      paint: option.paint
+        type: option.type,
-    })
+        source: option.source,
+        paint: option.paint
+      })
+    } else {
+      alert('该图层已存在!请勿重复添加。')
+    }
   } else {
     alert('请输入WMS服务地址!')
   }
@@ -34,11 +39,10 @@ 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(id)
+  map.removeSource(option.source)
 }
 
 /**
@@ -57,53 +61,59 @@ export function removeWFSLayer(map, option) {
  * @param option Object
  */
 export function loadWFSLayer(map, url, option) {
-  if (url) {
+  const source = map.getSource(option.id)
-    axios.get(url).then((res) => {
+  const layer = map.getLayer(option.id)
-      const features = res.data.features
+  if (source == undefined && layer == undefined) {
-      // console.log(features, "元素层");
+    if (url) {
-      // let layerType = null;
+      axios.get(url).then((res) => {
-      // let geometryType = features[0].geometry.type;
+        const features = res.data.features
-      const addLayerOption = {
+        // console.log(features, "元素层");
-        id: option.id,
+        // let layerType = null;
-        type: option.type,
+        // let geometryType = features[0].geometry.type;
-        source: {
+        const addLayerOption = {
-          type: 'geojson',
+          id: option.id,
-          data: {
+          type: option.type,
-            type: 'FeatureCollection',
+          source: {
-            features: features
+            type: 'geojson',
-          }
+            data: {
-        },
+              type: 'FeatureCollection',
-        layout: {
+              features: features
-          visibility: 'visible'
+            }
-        },
+          },
-        paint: option.paint
+          layout: {
-      }
+            visibility: 'visible'
-      // if (geometryType == "MultiLineString") {
+          },
-      //   addLayerOption.type = "line";
+          paint: option.paint
-      // } else if (geometryType == "Line") {
+        }
-      //   addLayerOption.type = "line";
+        // if (geometryType == "MultiLineString") {
-      // } else if (geometryType == "Point") {
+        //   addLayerOption.type = "line";
-      //   addLayerOption.type = "circle";
+        // } else if (geometryType == "Line") {
-      // } else if (geometryType == " MultiPoint") {
+        //   addLayerOption.type = "line";
-      //   addLayerOption.type = "circle";
+        // } else if (geometryType == "Point") {
-      // } else if (geometryType == "Polygon") {
+        //   addLayerOption.type = "circle";
-      //   addLayerOption.type = "fill";
+        // } else if (geometryType == " MultiPoint") {
-      //   addLayerOption.paint = {
+        //   addLayerOption.type = "circle";
-      //     "fill-color": "rgba(200,100,240,0.4)",
+        // } else if (geometryType == "Polygon") {
-      //     "fill-outline-color": "rgba(200,100,240,1)",
+        //   addLayerOption.type = "fill";
-      //   };
+        //   addLayerOption.paint = {
-      // } else if (geometryType == "MultiPolygon") {
+        //     "fill-color": "rgba(200,100,240,0.4)",
-      //   addLayerOption.type = "fill";
+        //     "fill-outline-color": "rgba(200,100,240,1)",
-      //   addLayerOption.paint = {
+        //   };
-      //     "fill-color": "rgba(200,100,240,0.4)",
+        // } else if (geometryType == "MultiPolygon") {
-      //     "fill-outline-color": "rgba(200,100,240,1)",
+        //   addLayerOption.type = "fill";
-      //   };
+        //   addLayerOption.paint = {
-      // }
+        //     "fill-color": "rgba(200,100,240,0.4)",
+        //     "fill-outline-color": "rgba(200,100,240,1)",
+        //   };
+        // }
 
-      map.addLayer(addLayerOption)
+        map.addLayer(addLayerOption)
-    })
+      })
+    } else {
+      alert('请输入WFS地址!')
+    }
   } else {
-    alert('请输入WFS地址!')
+    alert('该图层已存在!请勿重复添加')
   }
 }
 
@@ -114,22 +124,28 @@ export function loadWFSLayer(map, url, option) {
  * @param option Object
  */
 export function loadWMTS(map, url, option) {
-  if (url) {
+  const source = map.getSource(option.source)
-    const id = url.split('layer=')[1]
+  const layer = map.getLayer(option.id)
-    map.addSource(option.source, {
+  if (source == undefined && layer == undefined) {
-      type: 'raster',
+    if (url) {
-      tiles: [url],
+      const id = url.split('layer=')[1]
+      map.addSource(option.source, {
+        type: 'raster',
+        tiles: [url],
 
-      tileSize: 256
+        tileSize: 256
-    })
+      })
-    map.addLayer({
+      map.addLayer({
-      id: id,
+        id: id,
-      type: option.type,
+        type: option.type,
-      source: option.source,
+        source: option.source,
-      paint: option.paint
+        paint: option.paint
-    })
+      })
+    } else {
+      alert('请输入WMTS服务地址!')
+    }
   } else {
-    alert('请输入WMTS服务地址!')
+    alert('该图层已存在!请勿重复添加。')
   }
 }
 

src/components/PositionMatching/index.vue

@@ -0,0 +1,55 @@
+<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,156 +1,149 @@
 <template>
-  <div class="content" id="map"></div>
+  <div id="map"
+       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() {
+  data () {
     return {
-      map: null,
+      map: null
-    };
+    }
   },
-  mounted() {
+  mounted () {
-    this.initMap();
+    this.initMap()
   },
   methods: {
-    initMap() {
+    initMap () {
-      let that = this;
+      const 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
+        // style:normal_style
-      });
+      })
-      
     },
-    loadWFS(url,option){
+    loadWFS (url, option) {
-         var geoJsonUrl =
+      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_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';
+      // 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)
-        let features = res.data.features;
+        const features = res.data.features
-        console.log(features, "元素层");
+        console.log(features, '元素层')
-        let layerType = null;
+        const layerType = null
-        let geometryType = features[0].geometry.type;
+        const geometryType = features[0].geometry.type
-        let addLayerOption = {
+        const 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 = {
+          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 = {
+          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);
-        
-      });
-    },
-    loadWMS(url,option){
-     console.log('111')
-   
-       this.map.addSource('wms-source',{
-         'type':'raster',
-         'tiles':[url],
-         'tileSize':512
-       })
-       this.map.addLayer({
-         'id':'wms-layer',
-         'type':'raster',
-         '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'],
 
-                'tileSize':256
+        this.map.addLayer(addLayerOption)
-            })
+      })
-            this.map.addLayer({
-                'id':'wmts-layer',
-                'type':'raster',
-                'source':'wmts-source',
-                'paint':{
-                    'raster-opacity':0.8
-                }
-            })
-        
     },
-    loadTMS(url,option){
+    loadWMS (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'
+      console.log('111')
-       
+
-         
+      this.map.addSource('wms-source', {
-          this.map.addLayer({
+        'type': 'raster',
-            'id':'tms-layer',
+        'tiles': [url],
-            'type':'raster',
+        'tileSize': 512
-            'source':{
+      })
-              'type':'raster',
+      this.map.addLayer({
-              'tiles':[tmsUrl]
+        'id': 'wms-layer',
-            }
+        'type': 'raster',
-           
+        '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'],
+
+        'tileSize': 256
+      })
+      this.map.addLayer({
+        'id': 'wmts-layer',
+        'type': 'raster',
+        'source': 'wmts-source',
+        'paint': {
+          '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',
+        'source': {
+          'type': 'raster',
+          'tiles': [tmsUrl]
+        }
+
+      })
     }
-  },
+  }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -158,4 +151,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>

src/views/dashboard/index.vue

@@ -1,5 +1,8 @@
 <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>
@@ -12,12 +15,15 @@
       <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,
@@ -30,7 +36,7 @@ import Transform from '@/api/gis/coordinate-conversion.js'
 export default {
   name: 'HomePage',
   components: {
-
+    PositionMatching
   },
   setup (props) {
     const router = useRouter()
@@ -180,5 +186,10 @@ export default {
     width: 100%;
     height: 100%;
   }
+  .fitchLocation {
+    position: absolute;
+    right: 30px;
+    top: 20px;
+  }
 }
 </style>