Compare commits
No commits in common. "b846f3cd40f7be9147077370b5090b2c36c0735f" and "863b7866cb1a928fba039e0080b676f0102d6698" have entirely different histories.
b846f3cd40
...
863b7866cb
|
|
@ -10,11 +10,9 @@ import axios from 'axios'
|
||||||
export function loadWMS(map, url, option) {
|
export function loadWMS(map, url, option) {
|
||||||
if (url) {
|
if (url) {
|
||||||
const id = url.split('layer=')[1]
|
const id = url.split('layer=')[1]
|
||||||
const source = map.getSource(option.source)
|
console.log(id, '新增的图层id')
|
||||||
const layer = map.getLayer(option.id)
|
|
||||||
if (source == undefined && layer == undefined) {
|
|
||||||
map.addSource(option.source, {
|
map.addSource(option.source, {
|
||||||
|
id: option.id,
|
||||||
type: 'raster',
|
type: 'raster',
|
||||||
tiles: [url],
|
tiles: [url],
|
||||||
tileSize: 512
|
tileSize: 512
|
||||||
|
|
@ -25,9 +23,6 @@ export function loadWMS(map, url, option) {
|
||||||
source: option.source,
|
source: option.source,
|
||||||
paint: option.paint
|
paint: option.paint
|
||||||
})
|
})
|
||||||
} else {
|
|
||||||
alert('该图层已存在!请勿重复添加。')
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
alert('请输入WMS服务地址!')
|
alert('请输入WMS服务地址!')
|
||||||
}
|
}
|
||||||
|
|
@ -39,10 +34,11 @@ export function loadWMS(map, url, option) {
|
||||||
* @param url
|
* @param url
|
||||||
*/
|
*/
|
||||||
export function removeLayer(map, url, option) {
|
export function removeLayer(map, url, option) {
|
||||||
|
console.log(url, '地址')
|
||||||
const id = url.split('layer=')[1]
|
const id = url.split('layer=')[1]
|
||||||
|
console.log(id, '移除的id')
|
||||||
map.removeLayer(id)
|
map.removeLayer(id)
|
||||||
map.removeSource(option.source)
|
map.removeSource(id)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -61,9 +57,6 @@ export function removeWFSLayer(map, option) {
|
||||||
* @param option Object
|
* @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 (url) {
|
if (url) {
|
||||||
axios.get(url).then((res) => {
|
axios.get(url).then((res) => {
|
||||||
const features = res.data.features
|
const features = res.data.features
|
||||||
|
|
@ -112,9 +105,6 @@ export function loadWFSLayer(map, url, option) {
|
||||||
} else {
|
} else {
|
||||||
alert('请输入WFS地址!')
|
alert('请输入WFS地址!')
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
alert('该图层已存在!请勿重复添加')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -124,9 +114,6 @@ export function loadWFSLayer(map, url, option) {
|
||||||
* @param option Object
|
* @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 (url) {
|
if (url) {
|
||||||
const id = url.split('layer=')[1]
|
const id = url.split('layer=')[1]
|
||||||
map.addSource(option.source, {
|
map.addSource(option.source, {
|
||||||
|
|
@ -144,9 +131,6 @@ export function loadWMTS(map, url, option) {
|
||||||
} else {
|
} else {
|
||||||
alert('请输入WMTS服务地址!')
|
alert('请输入WMTS服务地址!')
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
alert('该图层已存在!请勿重复添加。')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
|
|
@ -1,55 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,149 +1,156 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="map"
|
<div class="content" id="map"></div>
|
||||||
class="content" />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import normal_style from '../assets/js/normal_style.js'
|
import normal_style from "../assets/js/normal_style.js";
|
||||||
import axios from 'axios'
|
import axios from "axios";
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
map: null
|
map: null,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.initMap()
|
this.initMap();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initMap () {
|
initMap() {
|
||||||
const that = this
|
let that = this;
|
||||||
that.map = new mapboxgl.Map({
|
that.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: [
|
layers: [
|
||||||
{
|
{
|
||||||
id: '123',
|
id: "123",
|
||||||
type: 'raster',
|
type: "raster",
|
||||||
source: 'osm-tiles',
|
source: "osm-tiles",
|
||||||
'source-layer': 'osmtiles'
|
"source-layer": "osmtiles",
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
// style:normal_style
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
loadWFS (url, option) {
|
],
|
||||||
|
},
|
||||||
|
// style:normal_style
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
loadWFS(url,option){
|
||||||
var geoJsonUrl =
|
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'
|
"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_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_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_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';
|
//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) => {
|
axios.get(geoJsonUrl).then((res) => {
|
||||||
console.log(res)
|
console.log(res);
|
||||||
const features = res.data.features
|
let features = res.data.features;
|
||||||
console.log(features, '元素层')
|
console.log(features, "元素层");
|
||||||
const layerType = null
|
let layerType = null;
|
||||||
const geometryType = features[0].geometry.type
|
let geometryType = features[0].geometry.type;
|
||||||
const addLayerOption = {
|
let addLayerOption = {
|
||||||
id: 'points',
|
id: "points",
|
||||||
type: layerType,
|
type: layerType,
|
||||||
source: {
|
source: {
|
||||||
type: 'geojson',
|
type: "geojson",
|
||||||
data: {
|
data: {
|
||||||
type: 'FeatureCollection',
|
type: "FeatureCollection",
|
||||||
features: features
|
features: features,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
layout: {
|
layout: {
|
||||||
visibility: 'visible'
|
visibility: "visible",
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
if (geometryType == 'MultiLineString') {
|
if (geometryType == "MultiLineString") {
|
||||||
addLayerOption.type = 'line'
|
addLayerOption.type = "line";
|
||||||
} else if (geometryType == 'Line') {
|
} else if (geometryType == "Line") {
|
||||||
addLayerOption.type = 'line'
|
addLayerOption.type = "line";
|
||||||
} else if (geometryType == 'Point') {
|
} else if (geometryType == "Point") {
|
||||||
addLayerOption.type = 'circle'
|
addLayerOption.type = "circle";
|
||||||
} else if (geometryType == ' MultiPoint') {
|
} else if (geometryType == " MultiPoint") {
|
||||||
addLayerOption.type = 'circle'
|
addLayerOption.type = "circle";
|
||||||
} else if (geometryType == 'Polygon') {
|
} else if (geometryType == "Polygon") {
|
||||||
addLayerOption.type = 'fill'
|
addLayerOption.type = "fill";
|
||||||
addLayerOption.paint = {
|
addLayerOption.paint = {
|
||||||
'fill-color': 'rgba(200,100,240,0.4)',
|
"fill-color": "rgba(200,100,240,0.4)",
|
||||||
'fill-outline-color': 'rgba(200,100,240,1)'
|
"fill-outline-color": "rgba(200,100,240,1)",
|
||||||
}
|
};
|
||||||
} else if (geometryType == 'MultiPolygon') {
|
} else if (geometryType == "MultiPolygon") {
|
||||||
addLayerOption.type = 'fill'
|
addLayerOption.type = "fill";
|
||||||
addLayerOption.paint = {
|
addLayerOption.paint = {
|
||||||
'fill-color': 'rgba(200,100,240,0.4)',
|
"fill-color": "rgba(200,100,240,0.4)",
|
||||||
'fill-outline-color': 'rgba(200,100,240,1)'
|
"fill-outline-color": "rgba(200,100,240,1)",
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
this.map.addLayer(addLayerOption)
|
this.map.addLayer(addLayerOption);
|
||||||
})
|
|
||||||
|
});
|
||||||
},
|
},
|
||||||
loadWMS (url, option) {
|
loadWMS(url,option){
|
||||||
console.log('111')
|
console.log('111')
|
||||||
|
|
||||||
this.map.addSource('wms-source', {
|
this.map.addSource('wms-source',{
|
||||||
'type': 'raster',
|
'type':'raster',
|
||||||
'tiles': [url],
|
'tiles':[url],
|
||||||
'tileSize': 512
|
'tileSize':512
|
||||||
})
|
})
|
||||||
this.map.addLayer({
|
this.map.addLayer({
|
||||||
'id': 'wms-layer',
|
'id':'wms-layer',
|
||||||
'type': 'raster',
|
'type':'raster',
|
||||||
'source': 'wms-source',
|
'source':'wms-source',
|
||||||
'paint': {}
|
'paint':{}
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
loadWMTS (url, option) {
|
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.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({
|
this.map.addLayer({
|
||||||
'id': 'wmts-layer',
|
'id':'wmts-layer',
|
||||||
'type': 'raster',
|
'type':'raster',
|
||||||
'source': 'wmts-source',
|
'source':'wmts-source',
|
||||||
'paint': {
|
'paint':{
|
||||||
'raster-opacity': 0.8
|
'raster-opacity':0.8
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
loadTMS (url, option) {
|
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'
|
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({
|
this.map.addLayer({
|
||||||
'id': 'tms-layer',
|
'id':'tms-layer',
|
||||||
'type': 'raster',
|
'type':'raster',
|
||||||
'source': {
|
'source':{
|
||||||
'type': 'raster',
|
'type':'raster',
|
||||||
'tiles': [tmsUrl]
|
'tiles':[tmsUrl]
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- <div class="changeServe">
|
|
||||||
<div class="serveTitle">加载服务 :</div>
|
|
||||||
</div> -->
|
|
||||||
<div class="btns">
|
<div class="btns">
|
||||||
<button @click="loadWFS()">WFS服务</button>
|
<button @click="loadWFS()">WFS服务</button>
|
||||||
<button @click="removeWFSLayer()">移除wFS服务图层</button>
|
<button @click="removeWFSLayer()">移除wFS服务图层</button>
|
||||||
|
|
@ -15,15 +12,12 @@
|
||||||
<button @click="transform()">坐标转换</button>
|
<button @click="transform()">坐标转换</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="map" />
|
<div id="map" />
|
||||||
<div class="fitchLocation">
|
|
||||||
<position-matching />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import PositionMatching from '../../components/PositionMatching/index.vue'
|
|
||||||
import {
|
import {
|
||||||
loadWMS,
|
loadWMS,
|
||||||
removeLayer,
|
removeLayer,
|
||||||
|
|
@ -36,7 +30,7 @@ import Transform from '@/api/gis/coordinate-conversion.js'
|
||||||
export default {
|
export default {
|
||||||
name: 'HomePage',
|
name: 'HomePage',
|
||||||
components: {
|
components: {
|
||||||
PositionMatching
|
|
||||||
},
|
},
|
||||||
setup (props) {
|
setup (props) {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
@ -186,10 +180,5 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.fitchLocation {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
top: 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue