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

Compare commits

base: zhangtao:3ac4d6698afb1aea079561da2e2f8e7d9fb2166a
Branches Tags
zhangtao:master
zhangtao:gis
zhangtao:develop
zhangtao:lixin
zhangtao:wangmengqi1
zhangtao:wangmengqi
zhangtao:wangmq
..
compare: zhangtao:b846f3cd40f7be9147077370b5090b2c36c0735f
Branches Tags
zhangtao:gis
zhangtao:develop
zhangtao:lixin
zhangtao:wangmengqi1
zhangtao:wangmengqi
zhangtao:master
zhangtao:wangmq

No commits in common. "3ac4d6698afb1aea079561da2e2f8e7d9fb2166a" and "b846f3cd40f7be9147077370b5090b2c36c0735f" have entirely different histories.
3ac4d6698a ... b846f3cd40

4 changed files with 69 additions and 434 deletions
Show Stats Expand all files Collapse all files

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

@ -1,141 +0,0 @@
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)
}
}

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

@ -12,7 +12,7 @@ export function loadWMS (map, url, option) {
const id = url.split('layer=')[1] const id = url.split('layer=')[1]
const source = map.getSource(option.source) const source = map.getSource(option.source)
const layer = map.getLayer(option.id) const layer = map.getLayer(option.id)
if (source === undefined && layer === undefined) { if (source == undefined && layer == undefined) {
map.addSource(option.source, { map.addSource(option.source, {
type: 'raster', type: 'raster',
@ -63,7 +63,7 @@ export function removeWFSLayer (map, option) {
export function loadWFSLayer(map, url, option) { export function loadWFSLayer(map, url, option) {
const source = map.getSource(option.id) const source = map.getSource(option.id)
const layer = map.getLayer(option.id) const layer = map.getLayer(option.id)
if (source === undefined && layer === undefined) { if (source == undefined && layer == undefined) {
if (url) { if (url) {
axios.get(url).then((res) => { axios.get(url).then((res) => {
const features = res.data.features const features = res.data.features
@ -126,7 +126,7 @@ export function loadWFSLayer (map, url, option) {
export function loadWMTS(map, url, option) { export function loadWMTS(map, url, option) {
const source = map.getSource(option.source) const source = map.getSource(option.source)
const layer = map.getLayer(option.id) const layer = map.getLayer(option.id)
if (source === undefined && layer === undefined) { if (source == undefined && layer == undefined) {
if (url) { if (url) {
const id = url.split('layer=')[1] const id = url.split('layer=')[1]
map.addSource(option.source, { map.addSource(option.source, {
@ -156,9 +156,6 @@ export function loadWMTS (map, url, option) {
* @param option Object * @param option Object
*/ */
export function loadTMSLayer(map, url, option) { 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) { if (url) {
const id = url.split('layer=')[1] const id = url.split('layer=')[1]
map.addSource(option.source, { map.addSource(option.source, {
@ -176,7 +173,4 @@ export function loadTMSLayer (map, url, option) {
} else { } else {
alert('请输入TMS服务地址!') alert('请输入TMS服务地址!')
} }
} else {
alert('该图层已存在!请勿重复添加')
}
} }

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 84 KiB

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

@ -1,28 +1,19 @@
<template> <template>
<div class="content"> <div class="content">
<div class="changeServe"> <!-- <div class="changeServe">
<div class="serveTitle">加载服务&nbsp;:&nbsp;</div> <div class="serveTitle">加载服务&nbsp;:</div>
<select v-model="selected" </div> -->
@change="changeServe(selected)"> <div class="btns">
<option v-for="item in serveList" <button @click="loadWFS()">WFS服务</button>
:value="item.value">{{ item.text }}</option> <button @click="removeWFSLayer()">移除wFS服务图层</button>
</select> <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> </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 id="map" />
<div class="fitchLocation"> <div class="fitchLocation">
<position-matching /> <position-matching />
@ -32,7 +23,6 @@
<script> <script>
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import axios from 'axios'
import PositionMatching from '../../components/PositionMatching/index.vue' import PositionMatching from '../../components/PositionMatching/index.vue'
import { import {
loadWMS, loadWMS,
@ -42,9 +32,7 @@ import {
loadTMSLayer, loadTMSLayer,
removeWFSLayer removeWFSLayer
} from '@/api/gis/service.js' } from '@/api/gis/service.js'
import normal_style from '@/assets/js/normal_style.js'
import Transform from '@/api/gis/coordinate-conversion.js' import Transform from '@/api/gis/coordinate-conversion.js'
import LoadAggregationGraph from '@/api/gis/load-aggregation-graph.js'
export default { export default {
name: 'HomePage', name: 'HomePage',
components: { components: {
@ -61,32 +49,7 @@ export default {
}, },
data () { data () {
return { 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 () { mounted () {
@ -94,170 +57,32 @@ export default {
}, },
methods: { methods: {
initMap () { initMap () {
mapboxgl.accessToken = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A'
this.map = new mapboxgl.Map({ this.map = new mapboxgl.Map({
container: 'map', container: 'map',
center: [120.476913, 31.416667], center: [120.476913, 31.416667],
zoom: 5, 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: [
// {
// 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) { layers: [
switch (transformStyle) { {
case 'bd09togcj02': id: '123',
this.coordinateAfter = Transform.bd09togcj02(this.coordinateBefore) type: 'raster',
break source: 'osm-tiles',
case 'gcj02tobd09': 'source-layer': 'osmtiles'
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像素的粉红色晕染
] ]
} }
} // style:normal_style
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 () { loadWFS () {
const url = const url =
@ -310,13 +135,7 @@ export default {
removeWMTSLayer () { removeWMTSLayer () {
const url = 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' 'http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs'
const option = { removeLayer(this.map, url)
id: 'wmts-layer',
type: 'raster',
source: 'wmts-source',
paint: { 'raster-opacity': 0.8 }
}
removeLayer(this.map, url, option)
}, },
loadTMS () { loadTMS () {
let url let url
@ -340,7 +159,6 @@ export default {
) )
console.log(lng_lat_2, 'gc坐标') console.log(lng_lat_2, 'gc坐标')
} }
} }
} }
</script> </script>
@ -349,61 +167,25 @@ export default {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: relative; position: relative;
.changeServe { .btns {
width: 100%;
height: 40px;
position: absolute; position: absolute;
top: 20px; // background-color:yellow;
left: 10px; top: 0;
left: 0;
z-index: 100; z-index: 100;
display: flex;
.serveTitle { align-items: center;
float: left; padding-left: 20px;
background-color: rgba(245, 245, 245, 0.8); button {
height: 30px; margin-right: 10px;
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 { #map {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.fitchLocation { .fitchLocation {
position: absolute; position: absolute;
right: 30px; right: 30px;