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

服务文件

This commit is contained in:
unknown 2022-10-24 13:57:01 +08:00
parent 3f23fbad32
commit 77aafac3e3
6 changed files with 273 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,19 +10,24 @@ import axios from 'axios'
export function loadWMS(map, url, option) {
if (url) {
const id = url.split('layer=')[1]
console.log(id, '新增的图层id')
map.addSource(option.source, {
id: option.id,
type: 'raster',
tiles: [url],
tileSize: 512
})
map.addLayer({
id: id,
type: option.type,
source: option.source,
paint: option.paint
})
const source = map.getSource(option.source)
const layer = map.getLayer(option.id)
if (source == undefined && layer == undefined) {
map.addSource(option.source, {
type: 'raster',
tiles: [url],
tileSize: 512
})
map.addLayer({
id: id,
type: option.type,
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,53 +61,59 @@ export function removeWFSLayer(map, option) {
* @param option Object
*/
export function loadWFSLayer(map, url, option) {
if (url) {
axios.get(url).then((res) => {
const features = res.data.features
// console.log(features, "元素层");
// let layerType = null;
// let geometryType = features[0].geometry.type;
const addLayerOption = {
id: option.id,
type: option.type,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: features
}
},
layout: {
visibility: 'visible'
},
paint: option.paint
}
// 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)",
// };
// }
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
// console.log(features, "元素层");
// let layerType = null;
// let geometryType = features[0].geometry.type;
const addLayerOption = {
id: option.id,
type: option.type,
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: features
}
},
layout: {
visibility: 'visible'
},
paint: option.paint
}
// 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)",
// };
// }
map.addLayer(addLayerOption)
})
map.addLayer(addLayerOption)
})
} else {
alert('请输入WFS地址!')
}
} else {
alert('请输入WFS地址!')
alert('该图层已存在!请勿重复添加')
}
}
@ -114,22 +124,28 @@ export function loadWFSLayer(map, url, option) {
* @param option Object
*/
export function loadWMTS(map, url, option) {
if (url) {
const id = url.split('layer=')[1]
map.addSource(option.source, {
type: 'raster',
tiles: [url],
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('请输入WMTS服务地址!')
}
} else {
alert('请输入WMTS服务地址!')
alert('该图层已存在!请勿重复添加。')
}
}

BIN
src/assets/img/location.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

55
src/components/PositionMatching/index.vue Normal file
View File

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

235
src/examples/service.vue
View File

@ -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 axios from "axios";
import normal_style from '../assets/js/normal_style.js'
import axios from 'axios'
export default {
data() {
data () {
return {
map: null,
};
map: null
}
},
mounted() {
this.initMap();
mounted () {
this.initMap()
},
methods: {
initMap() {
let that = this;
initMap () {
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": {
type: "raster",
tiles: ["http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"],
'osm-tiles': {
type: 'raster',
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
});
id: '123',
type: 'raster',
source: 'osm-tiles',
'source-layer': 'osmtiles'
}
]
}
// 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'
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';
// 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",
console.log(res)
const features = res.data.features
console.log(features, '元素层')
const layerType = null
const geometryType = features[0].geometry.type
const addLayerOption = {
id: 'points',
type: layerType,
source: {
type: "geojson",
type: 'geojson',
data: {
type: "FeatureCollection",
features: features,
},
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)",
};
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
}
})
this.map.addLayer(addLayerOption)
})
},
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]
}
})
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>
<style lang="scss" scoped>
@ -158,4 +151,4 @@ export default {
width: 100%;
height: 100%;
}
</style>
</style>

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

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