From 7b0cf77b273359b2d4247fbc3117ed7bb2fc4f24 Mon Sep 17 00:00:00 2001
From: unknown <2548700810@qq.com>
Date: Thu, 20 Oct 2022 19:19:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json             |   6 +-
 src/App.vue                   |  26 +++-----
 src/assets/js/normal_style.js |   4 +-
 src/examples/service.vue      | 116 ++++++++++++++++++++++++++++++++--
 src/main.js                   |   2 +
 src/views/dashboard/index.vue |  27 +++++---
 6 files changed, 148 insertions(+), 33 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b3b9481..048d5d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2692,9 +2692,9 @@
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.14.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
     },
     "formstream": {
       "version": "1.1.1",
diff --git a/src/App.vue b/src/App.vue
index 75c529d..2e04f59 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,29 +7,23 @@
  * @FilePath: \gis\src\App.vue
 -->
 <template>
-  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" inline-theme-disabled :theme-overrides="themeOverrides">
-    <n-loading-bar-provider>
-      <loading-bar />
-      <n-dialog-provider>
-        <dialog-content />
-        <n-message-provider>
-          <message-content />
-        </n-message-provider>
-        <router-view v-slot="{ Component }">
-          <component :is="Component" />
-        </router-view>
-      </n-dialog-provider>
-    </n-loading-bar-provider>
-  </n-config-provider>
+  <div>
+    <Dashboard/>
+  </div>
 </template>
 
-<script setup>
+<script>
 import { zhCN, dateZhCN } from 'naive-ui'
 import themeOverrides from '@/utils/ui/theme.js'
 import loadingBar from '@/components/LoadingBar/index.vue'
 import messageContent from '@/components/Message/index.vue'
 import dialogContent from '@/components/Dialog/index.vue'
-
+import Dashboard from './views/dashboard/index.vue'
+export default {
+  components:{
+    Dashboard
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/src/assets/js/normal_style.js b/src/assets/js/normal_style.js
index d190b97..d177126 100644
--- a/src/assets/js/normal_style.js
+++ b/src/assets/js/normal_style.js
@@ -14,8 +14,8 @@ const chinaurl =
   chinaGroupName +
   '@EPSG:900913@pbf/{z}/{x}/{y}.pbf';
 
-const spriteurl = 'http://192.168.12.58:8080/sprite-zt/sprite';
-const glyphsurl = 'http://192.168.12.58:8080/mbgl_data/fonts/{fontstack}/{range}.pbf';
+const spriteurl = 'http://192.168.11.35:8089/assets/sprite-th/sprite';
+const glyphsurl = 'http://192.168.11.35:8089/assets/fonts/{fontstack}/{range}.pbf';
 const iconSize = 0.6;
 const normal_style = {
   version: 8,
diff --git a/src/examples/service.vue b/src/examples/service.vue
index be7aeb4..5e0293d 100644
--- a/src/examples/service.vue
+++ b/src/examples/service.vue
@@ -3,7 +3,8 @@
 </template>
 
 <script>
-import normal_style from '../assets/js/normal_style.js'
+import normal_style from "../assets/js/normal_style.js";
+import axios from "axios";
 export default {
   data() {
     return {
@@ -15,9 +16,11 @@ export default {
   },
   methods: {
     initMap() {
-     
-      this.map = new mapboxgl.Map({
+      let that = this;
+      that.map = new mapboxgl.Map({
         container: "map",
+        center: [120.476913, 31.416667],
+        zoom: 5,
         style: {
           version: 8,
           name: "Mapbox Streets",
@@ -38,9 +41,114 @@ export default {
             },
           ],
         },
-        //  style:normal_style
+         // 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";
+      //线 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);
+        let features = res.data.features;
+        console.log(features, "元素层");
+        let layerType = null;
+        let geometryType = features[0].geometry.type;
+        let addLayerOption = {
+          id: "points",
+          type: layerType,
+          source: {
+            type: "geojson",
+            data: {
+              type: "FeatureCollection",
+              features: features,
+            },
+          },
+          layout: {
+            visibility: "visible",
+          },
+        };
+        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)",
+          };
+        }
+       
+          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({
+                '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>
diff --git a/src/main.js b/src/main.js
index f9d2ceb..b4a96b6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import '@/styles/index.scss'
 import 'uno.css'
+import axios from 'axios'
 
 import { createApp } from 'vue'
 import { setupRouter } from '@/router'
@@ -7,6 +8,7 @@ import { setupStore } from '@/store'
 
 import App from './App.vue'
 
+
 function setupApp() {
   const app = createApp(App)
 
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 5e26373..c21d447 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -3,11 +3,12 @@
     <!-- <span>首页</span> -->
     <!-- 按钮控制区 -->
     <div class="btns">
-      <button @click="showInfo()">WMS服务</button>
-      <button >WMTS服务</button>
-      <button>TMS服务</button>
+      <button @click="loadWFS()">WFS服务</button>
+      <button @click="loadWMS()">WMS服务</button>
+      <button @click="loadWMTS()">WMTS服务</button>
+      <button @click="loadTMS()">TMS服务</button>
     </div>
-    <Service/>
+    <Service ref="service"/>
   </div>
 </template>
 
@@ -32,16 +33,26 @@ export default {
      
   },
   methods:{
-     showInfo(){
-       console.log('111')
+     loadWFS(){
+       this.$refs.service.loadWFS()
+     },
+     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'
+       this.$refs.service.loadWMS(wmsUrl)
+     },
+     loadWMTS(){
+       this.$refs.service.loadWMTS()
+     },
+     loadTMS(){
+       this.$refs.service.loadTMS()
      }
   }
 }
 </script>
 <style lang="scss" scoped>
      .content{
-       width:100%;
-       height:100%;
+       width:100vw;
+       height:100vh;
        position:relative;
        .btns{
          width:100%;