Compare commits
4 Commits
449070ad2d
...
4e2f51a0d2
| Author | SHA1 | Date |
|---|---|---|
 unknown
|
4e2f51a0d2 | |
|
unknown
|
01e3800bea | |
|
unknown
|
7b0cf77b27 | |
 lixin
|
73607b7276 |
|
|
@ -0,0 +1,169 @@
|
|||
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,31 +4,184 @@
|
|||
<!-- 按钮控制区 -->
|
||||
<div class="btns">
|
||||
<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="loadWMTS()">WMTS服务</button>
|
||||
<button @click="loadTMS()">TMS服务</button>
|
||||
</div>
|
||||
<Service ref="service"/>
|
||||
>>>>>>> 449070ad2d3c0e373e07e7808f3910ee5dd79c00
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRouter } from 'vue-router'
|
||||
import Service from '../../examples/service.vue'
|
||||
import { useRouter } from "vue-router";
|
||||
import Service from "../../examples/service.vue";
|
||||
import {
|
||||
loadWMS,
|
||||
removeLayer,
|
||||
loadWMTS,
|
||||
loadWFSLayer,
|
||||
loadTMSLayer,
|
||||
removeWFSLayer
|
||||
} from "@/api/gis/service.js";
|
||||
export default {
|
||||
name: 'HomePage',
|
||||
components:{
|
||||
Service
|
||||
name: "HomePage",
|
||||
components: {
|
||||
Service,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
};
|
||||
},
|
||||
setup(props) {
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
function toSystem() {
|
||||
router.push({ path: '/login' })
|
||||
router.push({ path: "/login" });
|
||||
}
|
||||
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(){
|
||||
|
||||
},
|
||||
|
|
@ -71,5 +224,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
>>>>>>> 449070ad2d3c0e373e07e7808f3910ee5dd79c00
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue