Compare commits
No commits in common. "4e2f51a0d23eab53c9e4ac510801a7bb7c2d6aa2" and "449070ad2d3c0e373e07e7808f3910ee5dd79c00" have entirely different histories.
4e2f51a0d2
...
449070ad2d
|
|
@ -1,169 +0,0 @@
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description:加载WMS服务
|
|
||||||
* @param map
|
|
||||||
* @param url String
|
|
||||||
* @param option Object
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
export function loadWMS(map,url,option){
|
|
||||||
if(url) {
|
|
||||||
let 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
|
|
||||||
})
|
|
||||||
|
|
||||||
}else{
|
|
||||||
alert('请输入WMS服务地址!')
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description:根据id删除指定图层
|
|
||||||
* @param map
|
|
||||||
* @param url
|
|
||||||
*/
|
|
||||||
export function removeLayer(map,url,option){
|
|
||||||
console.log(url,'地址')
|
|
||||||
let id=url.split('layer=')[1]
|
|
||||||
console.log(id,'移除的id')
|
|
||||||
map.removeLayer(id)
|
|
||||||
map.removeSource(id)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description:移除WFS服务图层
|
|
||||||
* @param {*} map
|
|
||||||
* @param {*} url
|
|
||||||
* @param {*} option
|
|
||||||
*/
|
|
||||||
export function removeWFSLayer(map,option){
|
|
||||||
map.removeLayer(option.id)
|
|
||||||
map.removeSource(option.id)
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description:加载WFS服务
|
|
||||||
* @param url String
|
|
||||||
* @param option Object
|
|
||||||
*/
|
|
||||||
export function loadWFSLayer(map,url,option){
|
|
||||||
if(url){
|
|
||||||
axios.get(url).then((res) => {
|
|
||||||
|
|
||||||
let features = res.data.features;
|
|
||||||
// console.log(features, "元素层");
|
|
||||||
// let layerType = null;
|
|
||||||
// let geometryType = features[0].geometry.type;
|
|
||||||
let 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);
|
|
||||||
|
|
||||||
});
|
|
||||||
}else{
|
|
||||||
alert('请输入WFS地址!')
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description:加载WMTS服务
|
|
||||||
* @param map
|
|
||||||
* @param url String
|
|
||||||
* @param option Object
|
|
||||||
*/
|
|
||||||
export function loadWMTS(map,url,option){
|
|
||||||
if(url){
|
|
||||||
|
|
||||||
let 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
|
|
||||||
})
|
|
||||||
}else{
|
|
||||||
alert('请输入WMTS服务地址!')
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description:加载TMS服务
|
|
||||||
* @param map
|
|
||||||
* @param url String
|
|
||||||
* @param option Object
|
|
||||||
*/
|
|
||||||
export function loadTMSLayer(map,url,option){
|
|
||||||
if(url){
|
|
||||||
let 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
|
|
||||||
})
|
|
||||||
}else{
|
|
||||||
alert('请输入TMS服务地址!')
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -4,184 +4,31 @@
|
||||||
<!-- 按钮控制区 -->
|
<!-- 按钮控制区 -->
|
||||||
<div class="btns">
|
<div class="btns">
|
||||||
<button @click="loadWFS()">WFS服务</button>
|
<button @click="loadWFS()">WFS服务</button>
|
||||||
<<<<<<< HEAD
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div id="map"></div>
|
|
||||||
<!-- <Service ref="service"/> -->
|
|
||||||
=======
|
|
||||||
<button @click="loadWMS()">WMS服务</button>
|
<button @click="loadWMS()">WMS服务</button>
|
||||||
<button @click="loadWMTS()">WMTS服务</button>
|
<button @click="loadWMTS()">WMTS服务</button>
|
||||||
<button @click="loadTMS()">TMS服务</button>
|
<button @click="loadTMS()">TMS服务</button>
|
||||||
</div>
|
</div>
|
||||||
<Service ref="service"/>
|
<Service ref="service"/>
|
||||||
>>>>>>> 449070ad2d3c0e373e07e7808f3910ee5dd79c00
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from 'vue-router'
|
||||||
import Service from "../../examples/service.vue";
|
import Service from '../../examples/service.vue'
|
||||||
import {
|
|
||||||
loadWMS,
|
|
||||||
removeLayer,
|
|
||||||
loadWMTS,
|
|
||||||
loadWFSLayer,
|
|
||||||
loadTMSLayer,
|
|
||||||
removeWFSLayer
|
|
||||||
} from "@/api/gis/service.js";
|
|
||||||
export default {
|
export default {
|
||||||
name: "HomePage",
|
name: 'HomePage',
|
||||||
components: {
|
components:{
|
||||||
Service,
|
Service
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
map: null,
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const router = useRouter();
|
const router = useRouter()
|
||||||
function toSystem() {
|
function toSystem() {
|
||||||
router.push({ path: "/login" });
|
router.push({ path: '/login' })
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
toSystem,
|
toSystem
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initMap();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
initMap() {
|
|
||||||
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"],
|
|
||||||
|
|
||||||
tileSize: 256,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
layers: [
|
|
||||||
{
|
|
||||||
id: "123",
|
|
||||||
type: "raster",
|
|
||||||
source: "osm-tiles",
|
|
||||||
"source-layer": "osmtiles",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
// style:normal_style
|
|
||||||
});
|
|
||||||
},
|
|
||||||
loadWFS() {
|
|
||||||
let 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'
|
|
||||||
let option = {id:'point',type:'circle',paint:{}};
|
|
||||||
loadWFSLayer(this.map, url, option);
|
|
||||||
|
|
||||||
},
|
|
||||||
removeWFSLayer(){
|
|
||||||
let option = {id:'point',type:'circle',paint:{}};
|
|
||||||
|
|
||||||
removeWFSLayer(this.map,option)
|
|
||||||
},
|
|
||||||
loadWMS() {
|
|
||||||
let url =
|
|
||||||
"http://192.168.11.35:8999/geoserver/ows?service=WMS&version=1.3.0&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=sz_pg%3Asz_pg_china_mb_china_poi";
|
|
||||||
let option = {
|
|
||||||
id: "wms-layer",
|
|
||||||
sourceId:'wms-sourceId',
|
|
||||||
type: "raster",
|
|
||||||
source: "wms-source",
|
|
||||||
paint: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
loadWMS(this.map, url, option);
|
|
||||||
},
|
|
||||||
removeWMSLayer() {
|
|
||||||
let url =
|
|
||||||
"http://192.168.11.35:8999/geoserver/ows?service=WMS&version=1.3.0&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=sz_pg%3Asz_pg_china_mb_china_poi";
|
|
||||||
let option = {
|
|
||||||
id: "wms-layer",
|
|
||||||
sourceId:'wms-sourceId',
|
|
||||||
type: "raster",
|
|
||||||
source: "wms-source",
|
|
||||||
paint: {},
|
|
||||||
};
|
|
||||||
removeLayer(this.map, url,option);
|
|
||||||
},
|
|
||||||
loadWMTS() {
|
|
||||||
let url =
|
|
||||||
"http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs"
|
|
||||||
;
|
|
||||||
let option = {
|
|
||||||
id: "wmts-layer",
|
|
||||||
type: "raster",
|
|
||||||
source: "wmts-source",
|
|
||||||
paint: { "raster-opacity": 0.8 },
|
|
||||||
};
|
|
||||||
|
|
||||||
loadWMTS(this.map, url, option);
|
|
||||||
},
|
|
||||||
removeWMTSLayer(){
|
|
||||||
let 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);
|
|
||||||
},
|
|
||||||
loadTMS() {
|
|
||||||
let url;
|
|
||||||
let option = {};
|
|
||||||
loadTMSLayer(this.map, url, option);
|
|
||||||
},
|
|
||||||
removeTMSLayer(){
|
|
||||||
let url;
|
|
||||||
|
|
||||||
removeLayer(this.map, url);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
<<<<<<< HEAD
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.content {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
position: relative;
|
|
||||||
.btns {
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
position: absolute;
|
|
||||||
// background-color:yellow;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 100;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 20px;
|
|
||||||
button {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#map {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
=======
|
|
||||||
mounted(){
|
mounted(){
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
@ -224,6 +71,5 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
>>>>>>> 449070ad2d3c0e373e07e7808f3910ee5dd79c00
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue