Merge branch 'wangmengqi' of zhangtao/gis into develop

src/api/gis/service.js

@@ -10,9 +10,11 @@ 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)
+    const layer = map.getLayer(option.id)
+    if (source == undefined && layer == undefined) {
       map.addSource(option.source, {
-      id: option.id,
+
         type: 'raster',
         tiles: [url],
         tileSize: 512
@@ -23,6 +25,9 @@ export function loadWMS(map, url, option) {
         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,6 +61,9 @@ 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
@@ -105,6 +112,9 @@ export function loadWFSLayer(map, url, option) {
     } else {
       alert('请输入WFS地址!')
     }
+  } else {
+    alert('该图层已存在!请勿重复添加')
+  }
 }
 
 /**
@@ -114,6 +124,9 @@ 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, {
@@ -131,6 +144,9 @@ export function loadWMTS(map, url, option) {
     } else {
       alert('请输入WMTS服务地址!')
     }
+  } else {
+    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
-      });
+      })
-      
     },
-    loadWFS(url,option){
+    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_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 = {
-            "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){
+    loadWMS (url, option) {
       console.log('111')
 
-       this.map.addSource('wms-source',{
+      this.map.addSource('wms-source', {
-         'type':'raster',
+        'type': 'raster',
-         'tiles':[url],
+        'tiles': [url],
-         'tileSize':512
+        'tileSize': 512
       })
       this.map.addLayer({
-         'id':'wms-layer',
+        'id': 'wms-layer',
-         'type':'raster',
+        'type': 'raster',
-         'source':'wms-source',
+        'source': 'wms-source',
-         'paint':{}
+        'paint': {}
       })
-     
     },
-    loadWMTS(url,option){
+    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.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',
+        'id': 'wmts-layer',
-                'type':'raster',
+        'type': 'raster',
-                'source':'wmts-source',
+        'source': 'wmts-source',
-                'paint':{
+        'paint': {
-                    'raster-opacity':0.8
+          'raster-opacity': 0.8
         }
       })
-        
     },
-    loadTMS(url,option){
+    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'
+      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',
+        'id': 'tms-layer',
-            'type':'raster',
+        'type': 'raster',
-            'source':{
+        'source': {
-              'type':'raster',
+          'type': 'raster',
-              'tiles':[tmsUrl]
+          'tiles': [tmsUrl]
         }
 
       })
-        
     }
-  },
+  }
-};
+}
 </script>
 
 <style lang="scss" scoped>

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>