Merge branch 'wangmengqi' of zhangtao/gis into develop

src/api/gis/load-aggregation-graph.js

@@ -0,0 +1,141 @@
+import axios from 'axios'
+import { removeLayer } from './service'
+
+export default {
+  sourceId: '',
+  layerId: '',
+  clusterCountId: '',
+  unclusteredId: '',
+  /**
+  * 加载聚合图层
+  * @param map
+  * @param url String 传递的后端服务地址
+  * @param sourceOption Object 只需传clusterMaxZoom和clusterRadius
+  * @param layerOption Object 只需传filter和paint
+  * @param clusterLayerOption Object 只需传filter layout paint
+  * @param unclusterLayerOption Object 只需传filter paint
+  */
+  loadAggregationGraph (map, url, sourceOption, layerOption, clusterLayerOption, unclusterLayerOption) {
+    axios.get(url).then((res) => {
+      if (res) {
+        // console.log(res, '返回的数据')
+        const data = res.data
+
+        const sourceId = res.data.crs.properties.name
+        this.sourceId = sourceId
+        const layerId = sourceId + 'layer'
+        this.layerId = layerId
+        const clusterCountId = sourceId + 'clusterCount'
+        this.clusterCountId = clusterCountId
+        const unclusteredId = sourceId + 'unclustered'
+        this.unclusteredId = unclusteredId
+        map.addSource(sourceId, {
+          type: 'geojson',
+          data: data,
+          cluster: true,
+          clusterMaxZoom: sourceOption.clusterMaxZoom ? sourceOption.clusterMaxZoom : 14, // 最大缩放到群集点
+          clusterRadius: sourceOption.clusterRadius ? sourceOption.clusterRadius : 50// 每一组点的半径
+        })
+        // 外围有数字的图层,加晕染
+        map.addLayer({
+          id: layerId,
+          type: 'circle',
+          source: sourceId,
+          // filter: ['has', 'poi_id'],
+          filter: layerOption.filter,
+          paint: layerOption.paint ? layerOption.paint : {
+            // 蓝色,当点数小于100时为20px圆
+            // 点计数在100到750之间时为黄色,21px圆
+            // 点计数大于或等于750时为22像素的粉红色圆圈
+            'circle-color': [
+              'step',
+              ['get', 'poi_id'],
+              'rgba(81,187,214,0.8)',
+              100,
+              'rgba(241,240,117,0.8)',
+              750,
+              'rgba(242,140,177,0.8)'
+            ],
+            'circle-radius': [
+              'step',
+              ['get', 'poi_id'],
+              20, // 蓝色,当点数小于100时为20px圆
+              100, // 对应上面circle-color数字,意思为100以内
+              21, // 点计数在100到750之间为黄色,意思为750以内
+              750, // 对应上面circle-color数字,意思为750以内
+              22// 点计数大于或等于750时为22像素的粉红色圆圈
+            ],
+            // 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
+            'circle-stroke-color': [
+              'step',
+              ['get', 'poi_id'],
+              'rgba(81,187,214,0.2)',
+              100,
+              'rgba(241,240,117,0.2)',
+              750,
+              'rgba(242,140,177,0.2)'
+            ],
+            // 这个是外边框渲染的范围
+            'circle-stroke-width': [
+              'step',
+              ['get', 'poi_id'],
+              5, // 蓝色晕染长度,当点数小于100时为5px晕染
+              100, // 对应上面circle-color数字,意思为100以内
+              6, // 点计数在100到750之间时为黄色,6px晕染
+              750, // 对应上面circle-color数字,意思为750以内
+              7// 点计数大于或等于750时为7px像素的粉红色晕染
+            ]
+          }
+        })
+        // 聚合图圆圈中的数字
+        map.addLayer({
+          id: clusterCountId,
+          type: 'symbol',
+          source: sourceId,
+          // filter: ['has', 'poi_id'],
+          filter: clusterLayerOption.filter,
+          layout: clusterLayerOption.layout,
+          // layout:{
+          //   'text-field': '{poi_id}', // 文本内容来源字段
+          //   'text-font': ['Microsoft YaHei'],
+          //   'text-size': 12
+          // }
+          paint: clusterLayerOption.paint ? clusterLayerOption.paint : {
+            'text-color': 'hsl(0, 0%, 100%)',
+            'text-halo-color': '#54c081',
+            'text-halo-width': 100
+          }
+        })
+        // 聚合图中没有数字的显示小圆点
+        map.addLayer({
+          id: unclusteredId,
+          type: 'circle',
+          source: sourceId,
+          // filter: ['!', ['has', 'poi_id']],
+          filter: unclusterLayerOption.filter,
+          paint: unclusterLayerOption.paint ? unclusterLayerOption.paint : {
+            'circle-color': '#11b4da',
+            'circle-radius': 4,
+            'circle-stroke-width': 1,
+            'circle-stroke-color': '#fff'
+          }
+          // paint: {
+          //   'circle-color': '#11b4da',
+          //   'circle-radius': 4,
+          //   'circle-stroke-width': 1,
+          //   'circle-stroke-color': '#fff'
+          // }
+        })
+      }
+    })
+  },
+  /**
+   * 移除聚合图层
+   */
+  removeLayer (map) {
+    map.removeLayer(this.layerId)
+    map.removeLayer(this.clusterCountId)
+    map.removeLayer(this.unclusteredId)
+    map.removeSource(this.sourceId)
+  }
+}

src/api/gis/service.js

@@ -7,12 +7,12 @@ import axios from 'axios'
  * @param option Object
  *
  */
-export function loadWMS(map, url, option) {
+export function loadWMS (map, url, option) {
   if (url) {
     const id = url.split('layer=')[1]
     const source = map.getSource(option.source)
     const layer = map.getLayer(option.id)
-    if (source == undefined && layer == undefined) {
+    if (source === undefined && layer === undefined) {
       map.addSource(option.source, {
 
         type: 'raster',
@@ -38,7 +38,7 @@ export function loadWMS(map, url, option) {
  * @param  map
  * @param  url
  */
-export function removeLayer(map, url, option) {
+export function removeLayer (map, url, option) {
   const id = url.split('layer=')[1]
 
   map.removeLayer(id)
@@ -51,7 +51,7 @@ export function removeLayer(map, url, option) {
  * @param {*} url
  * @param {*} option
  */
-export function removeWFSLayer(map, option) {
+export function removeWFSLayer (map, option) {
   map.removeLayer(option.id)
   map.removeSource(option.id)
 }
@@ -60,10 +60,10 @@ export function removeWFSLayer(map, option) {
  * @param url String
  * @param option Object
  */
-export function loadWFSLayer(map, url, option) {
+export function loadWFSLayer (map, url, option) {
   const source = map.getSource(option.id)
   const layer = map.getLayer(option.id)
-  if (source == undefined && layer == undefined) {
+  if (source === undefined && layer === undefined) {
     if (url) {
       axios.get(url).then((res) => {
         const features = res.data.features
@@ -123,10 +123,10 @@ export function loadWFSLayer(map, url, option) {
  * @param url String
  * @param option Object
  */
-export function loadWMTS(map, url, option) {
+export function loadWMTS (map, url, option) {
   const source = map.getSource(option.source)
   const layer = map.getLayer(option.id)
-  if (source == undefined && layer == undefined) {
+  if (source === undefined && layer === undefined) {
     if (url) {
       const id = url.split('layer=')[1]
       map.addSource(option.source, {
@@ -155,22 +155,28 @@ export function loadWMTS(map, url, option) {
  * @param url String
  * @param option Object
  */
-export function loadTMSLayer(map, url, option) {
+export function loadTMSLayer (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('请输入TMS服务地址!')
+    }
   } else {
-    alert('请输入TMS服务地址!')
+    alert('该图层已存在!请勿重复添加')
   }
 }

src/views/dashboard/index.vue

@@ -1,19 +1,28 @@
 <template>
   <div class="content">
-    <!-- <div class="changeServe">
+    <div class="changeServe">
-      <div class="serveTitle">加载服务&nbsp;:</div>
+      <div class="serveTitle">加载服务&nbsp;:&nbsp;</div>
-    </div> -->
+      <select v-model="selected"
-    <div class="btns">
+              @change="changeServe(selected)">
-      <button @click="loadWFS()">WFS服务</button>
+        <option v-for="item in serveList"
-      <button @click="removeWFSLayer()">移除wFS服务图层</button>
+                :value="item.value">{{ item.text }}</option>
-      <button @click="loadWMS()">WMS服务</button>
+      </select>
-      <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>
-      <button @click="transform()">坐标转换</button>
     </div>
+    <div class="transform">
+      <div class="transformTitle">坐标转换&nbsp;:&nbsp;</div>
+      <input v-model="coordinateBefore"
+             type="text"
+             placeholder="请输入要转换的坐标">
+      <select v-model="transformSelected"
+              @change="changeCoordinate(transformSelected)">
+        <option v-for="item in transformList"
+                :value="item.value">{{ item.text }}</option>
+      </select>
+      <input v-model="coordinateAfter"
+             type="text">
+    </div>
+    <button class="aggregationGraph"
+            @click="changeAggregation()">{{ aggregationGraphBtnText }}</button>
     <div id="map" />
     <div class="fitchLocation">
       <position-matching />
@@ -23,6 +32,7 @@
 
 <script>
 import { useRouter } from 'vue-router'
+import axios from 'axios'
 import PositionMatching from '../../components/PositionMatching/index.vue'
 import {
   loadWMS,
@@ -32,7 +42,9 @@ import {
   loadTMSLayer,
   removeWFSLayer
 } from '@/api/gis/service.js'
+import normal_style from '@/assets/js/normal_style.js'
 import Transform from '@/api/gis/coordinate-conversion.js'
+import LoadAggregationGraph from '@/api/gis/load-aggregation-graph.js'
 export default {
   name: 'HomePage',
   components: {
@@ -49,7 +61,32 @@ export default {
   },
   data () {
     return {
-      map: null
+      map: null,
+      selected: '',
+      serveList: [
+        { value: 'loadWFS', text: '加载WFS服务' },
+        { value: 'removeWFS', text: '移除WFS服务' },
+        { value: 'loadWMS', text: '加载WMS服务' },
+        { value: 'removeWMS', text: '移除WMS服务' },
+        { value: 'loadWMTS', text: '加载WMTS服务' },
+        { value: 'removeWMTS', text: '移除WMTS服务' },
+        { value: 'loadTMS', text: '加载TMS服务' },
+        { value: 'removeTMS', text: '移除TMS服务' }
+      ],
+      transformSelected: '',
+      transformList: [
+        { value: 'bd09togcj02', text: '百度转火星(谷歌,高德)' },
+        { value: 'gcj02tobd09', text: '火星转百度' },
+        { value: 'wgs84togcj02', text: 'WGS84转GCJ02' },
+        { value: 'gcj02towgs84', text: 'GCJ02转WGS84' },
+        { value: 'bd09towgs84', text: '百度转WGS84' },
+        { value: 'wgs84tobd09', text: 'WGS84转百度' },
+        { value: 'LngLatToMercator', text: '经纬度转墨卡托' },
+        { value: 'MercatorToLngLat', text: '墨卡托转经纬度' }
+      ],
+      coordinateBefore: '',
+      coordinateAfter: '',
+      aggregationGraphBtnText: '加载聚合图'
     }
   },
   mounted () {
@@ -57,33 +94,171 @@ export default {
   },
   methods: {
     initMap () {
+      mapboxgl.accessToken = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A'
+
       this.map = new mapboxgl.Map({
         container: 'map',
         center: [120.476913, 31.416667],
         zoom: 5,
-        style: {
+        // style: {
-          version: 8,
+        //   version: 8,
-          name: 'Mapbox Streets',
+        //   name: 'Mapbox Streets',
-          sources: {
+        //   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: [
+        //   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
       })
     },
+    changeServe (selected) {
+      switch (selected) {
+        case 'loadWFS':
+          this.loadWFS()
+          break
+        case 'removeWFS':
+          this.removeWFSLayer()
+          break
+        case 'loadWMS':
+          this.loadWMS()
+          break
+        case 'removeWMS':
+          this.removeWMSLayer()
+          break
+        case 'loadWMTS':
+          this.loadWMTS()
+          break
+        case 'removeWMTS':
+          this.removeWMTSLayer()
+          break
+        case 'loadTMS':
+          this.loadTMS()
+          break
+        case 'removeTMS':
+          this.removeTMSLayer()
+      }
+    },
+    changeCoordinate (transformStyle) {
+      switch (transformStyle) {
+        case 'bd09togcj02':
+          this.coordinateAfter = Transform.bd09togcj02(this.coordinateBefore)
+          break
+        case 'gcj02tobd09':
+          this.coordinateAfter = Transform.gcj02tobd09(this.coordinateBefore)
+          break
+        case 'wgs84togcj02':
+          this.coordinateAfter = Transform.wgs84togcj02(this.coordinateBefore)
+          break
+        case 'gcj02towgs84':
+          this.coordinateAfter = Transform.gcj02towgs84(this.coordinateBefore)
+          break
+        case 'bd09towgs84':
+          this.coordinateAfter = Transform.bd09towgs84(this.coordinateBefore)
+          break
+        case 'wgs84tobd09':
+          this.coordinateAfter = Transform.wgs84tobd09(this.coordinateBefore)
+          break
+        case 'LngLatToMercator':
+          this.coordinateAfter = Transform.LngLatToMercator(this.coordinateBefore)
+          break
+        case 'MercatorToLngLat':
+          this.coordinateAfter = Transform.MercatorToLngLat(this.coordinateBefore)
+          break
+      }
+    },
+    // 点击加载聚合图/移除聚合图层
+    changeAggregation () {
+      if (this.aggregationGraphBtnText == '加载聚合图') {
+        this.aggregationGraphBtnText = '移除聚合图'
+        const 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'
+        const sourceOption = {
+          clusterMaxZoom: 14,
+          clusterRadius: 50
+        }
+        const layerOption = {
+          filter: ['has', 'poi_id'],
+          paint: {
+            // 蓝色,当点数小于100时为20px圆
+            // 点计数在100到750之间时为黄色,21px圆
+            // 点计数大于或等于750时为22像素的粉红色圆圈
+            'circle-color': [
+              'step',
+              ['get', 'poi_id'],
+              'rgba(81,187,214,0.8)',
+              100,
+              'rgba(241,240,117,0.8)',
+              750,
+              'rgba(242,140,177,0.8)'
+            ],
+            'circle-radius': [
+              'step',
+              ['get', 'poi_id'],
+              20, // 蓝色,当点数小于100时为20px圆
+              100, // 对应上面circle-color数字,意思为100以内
+              21, // 点计数在100到750之间为黄色,意思为750以内
+              750, // 对应上面circle-color数字,意思为750以内
+              22// 点计数大于或等于750时为22像素的粉红色圆圈
+            ],
+            // 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
+            'circle-stroke-color': [
+              'step',
+              ['get', 'poi_id'],
+              'rgba(81,187,214,0.2)',
+              100,
+              'rgba(241,240,117,0.2)',
+              750,
+              'rgba(242,140,177,0.2)'
+            ],
+            // 这个是外边框渲染的范围
+            'circle-stroke-width': [
+              'step',
+              ['get', 'poi_id'],
+              5, // 蓝色晕染长度,当点数小于100时为5px晕染
+              100, // 对应上面circle-color数字,意思为100以内
+              6, // 点计数在100到750之间时为黄色,6px晕染
+              750, // 对应上面circle-color数字,意思为750以内
+              7// 点计数大于或等于750时为7px像素的粉红色晕染
+            ]
+          }
+        }
+        const clusterLayerOption = {
+          filter: ['has', 'poi_id'], layout: {
+            'text-field': '{poi_id}', // 文本内容来源字段
+            'text-font': ['Microsoft YaHei'],
+            'text-size': 12
+          }, paint: {
+            'text-color': 'hsl(0, 0%, 100%)',
+            'text-halo-color': '#54c081',
+            'text-halo-width': 100
+          }
+        }
+        const unclusterLayerOption = {
+          filter: ['!', ['has', 'poi_id']],
+          paint: {
+            'circle-color': '#11b4da',
+            'circle-radius': 4,
+            'circle-stroke-width': 1,
+            'circle-stroke-color': '#fff'
+          }
+        }
+        LoadAggregationGraph.loadAggregationGraph(this.map, url, sourceOption, layerOption, clusterLayerOption, unclusterLayerOption)
+      } else {
+        this.aggregationGraphBtnText = '加载聚合图'
+        LoadAggregationGraph.removeLayer(this.map)
+      }
+    },
     loadWFS () {
       const 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'
@@ -135,7 +310,13 @@ export default {
     removeWMTSLayer () {
       const 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)
+      const option = {
+        id: 'wmts-layer',
+        type: 'raster',
+        source: 'wmts-source',
+        paint: { 'raster-opacity': 0.8 }
+      }
+      removeLayer(this.map, url, option)
     },
     loadTMS () {
       let url
@@ -159,6 +340,7 @@ export default {
       )
       console.log(lng_lat_2, 'gc坐标')
     }
+
   }
 }
 </script>
@@ -167,25 +349,61 @@ export default {
   width: 100vw;
   height: 100vh;
   position: relative;
-  .btns {
+  .changeServe {
-    width: 100%;
-    height: 40px;
     position: absolute;
-    //  background-color:yellow;
+    top: 20px;
-    top: 0;
+    left: 10px;
-    left: 0;
+
     z-index: 100;
-    display: flex;
+
-    align-items: center;
+    .serveTitle {
-    padding-left: 20px;
+      float: left;
-    button {
+      background-color: rgba(245, 245, 245, 0.8);
-      margin-right: 10px;
+      height: 30px;
+      line-height: 30px;
     }
+    select {
+      float: right;
+      padding: 5px;
+    }
+  }
+  .transform {
+    position: absolute;
+    top: 20px;
+    left: 230px;
+    z-index: 100;
+    .transformTitle {
+      background-color: rgba(245, 245, 245, 0.8);
+      height: 30px;
+      line-height: 30px;
+      float: left;
+    }
+    input {
+      height: 30px;
+      float: left;
+      padding-left: 15px;
+      width: 150px;
+    }
+    select {
+      float: left;
+      padding: 5px;
+    }
+  }
+  .aggregationGraph {
+    position: absolute;
+    z-index: 100;
+    top: 60px;
+    left: 10px;
+    border: none;
+    background-color: rgba(114, 159, 200, 0.5);
+    padding: 5px;
+    border-radius: 5px;
   }
   #map {
     width: 100%;
     height: 100%;
   }
+
   .fitchLocation {
     position: absolute;
     right: 30px;