【OpenLayers】VUE+OpenLayers+ElementUI加载WMS地图服务

<template>
  <div id="map" class="map"></div>
</template>
 
<script>
export default {
  name: 'OLWMSMap',
  data() {
    return {
      map: null,
      wmsSource: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      this.map = new ol.Map({
        target: 'map',
        layers: [],
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });
 
      // 创建WMS源
      this.wmsSource = new ol.source.TileWMS({
        url: 'http://yourserver/geoserver/your_workspace/wms', // GeoServer的URL
        params: {
          'LAYERS': 'your_layer', // 图层名称
          'TILED': true // 开启分块
        },
        serverType: 'geoserver',
        transition: 0 // 禁用平滑过渡
      });
 
      // 创建WMS图层
      const wmsLayer = new ol.layer.Tile({
        source: this.wmsSource
      });
 
      // 将WMS图层添加到地图中
      this.map.addLayer(wmsLayer);
    }
  }
};
</script>
 
<style>
.map {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

这个代码实例展示了如何在Vue应用中使用OpenLayers加载WMS（Web Mapping Service）服务。在mounted钩子中初始化了地图，并且创建了一个TileWMS源用于加载WMS服务的图层。代码中包含了必要的样式和地图初始化代码，可以直接集成到Vue项目中。