zhangtao
/
gis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

聚合图 #8

Manually merged
wangmengqi merged 1 commits from wangmengqi into develop 2022-10-25 17:15:31 +08:00
Conversation 0 Commits 1 Files Changed 4 +434 -69
4 changed files with 434 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
src/api/gis/load-aggregation-graph.js Normal file
View File

@ -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)
}
}

52
src/api/gis/service.js
View File

@ -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) {
if (url) {
const id = url.split('layer=')[1]
map.addSource(option.source, {
type: 'raster',
tiles: [url],
export function loadTMSLayer (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, {
type: 'raster',
tiles: [url],
tileSize: 256
})
map.addLayer({
id: id,
type: option.type,
source: option.source,
paint: option.paint
})
tileSize: 256
})
map.addLayer({
id: id,
type: option.type,
source: option.source,
paint: option.paint
})
} else {
alert('请输入TMS服务地址!')
}
} else {
alert('请输入TMS服务地址!')
alert('该图层已存在!请勿重复添加')
}
}

BIN
src/assets/img/search.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 16 KiB

310
src/views/dashboard/index.vue
View File

@ -1,19 +1,28 @@
<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>
<button @click="loadWMS()">WMS服务</button>
<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 class="changeServe">
<div class="serveTitle">加载服务&nbsp;:&nbsp;</div>
<select v-model="selected"
@change="changeServe(selected)">
<option v-for="item in serveList"
:value="item.value">{{ item.text }}</option>
</select>
</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: {
version: 8,
name: 'Mapbox Streets',
sources: {
'osm-tiles': {
type: 'raster',
tiles: ['http://c.tile.openstreetmap.org/{z}/{x}/{y}.png'],
// style: {
// version: 8,
// name: 'Mapbox Streets',
// sources: {
// 'osm-tiles': {
// type: 'raster',
// tiles: ['http://c.tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256
}
},
layers: [
{
id: '123',
type: 'raster',
source: 'osm-tiles',
'source-layer': 'osmtiles'
}
]
}
// style:normal_style
// tileSize: 256
// }
// },
// layers: [
// {
// id: '123',
// type: 'raster',
// source: 'osm-tiles',
// 'source-layer': 'osmtiles'
// }
// ]
// }
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 {
width: 100%;
height: 40px;
.changeServe {
position: absolute;
// background-color:yellow;
top: 0;
left: 0;
top: 20px;
left: 10px;
z-index: 100;
display: flex;
align-items: center;
padding-left: 20px;
button {
margin-right: 10px;
.serveTitle {
float: left;
background-color: rgba(245, 245, 245, 0.8);
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;