vue中使用OpenLayer加载Geoserver的WMS
<script setup lang="ts">
import { Map,View } from 'ol';
import { onMounted, ref } from 'vue';
import { TileWMS } from 'ol/source';
import TileLayer from 'ol/layer/Tile.js';
const map = ref<Map>()
const source = ref<TileWMS>()
const layer = ref<TileLayer>()
function calcuLateCenter(bbox:[lonLeftTop:number,latLeftTop:number,lonRightBottom:number,latRightBottom:number]):[centerLon:number,centerLat:number]{
const [lonLeftTop,latLeftTop,lonRightBottom,latRightBottom] = bbox
const centerLon = (lonLeftTop+lonRightBottom)/2
const centerLat = (latLeftTop+latRightBottom)/2
return [centerLon,centerLat]
}
onMounted(()=>{
map.value = new Map({
target:"map"
})
map.value.setView(new View({
center: calcuLateCenter([120.33197479248047,31.19165496826172,120.85912628173828,31.46062774658203]),
zoom: 12,
projection: 'EPSG:4326'
}));
source.value = new TileWMS({
url:"http://localhost:7781/geoserver/gisdb/wms",
projection: 'EPSG:4326', // here is the source projection
params: {
'LAYERS': 'gisdb:苏州',
'VERSION':"1.1.1",
'REQUEST':'GetMap',
'FORMAT':'image/jpeg',
'TRANSPARENT':true,
'BBOX':[120.33197479248047,31.19165496826172,120.85912628173828,31.46062774658203]
}
})
layer.value = new TileLayer({source:source.value})
map.value.addLayer(layer.value)
})
</script>
<template>
<div id="map"></div>
</template>
<style scoped>
#map {
position: fixed;
width:100%;
height:100%;
}
</style>