当前位置：首页 > article >正文

vue中使用OpenLayer加载Geoserver的WMS

article 2025/3/3 6:11:35

vue3中使用OpenLayer加载Geoserver的WMS

先要在geoserver中发布我们所需要的数据

思路：

1.初始化vue

2.下载ol库npm install ol

3.创建map和source,layer,注：本文数据是WMS(Web Map Service)的，需要layer是TileLayer，需要source是TileWMS,所以需要引入对应的库

4.将layer添加到map

示例代码：

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