当前位置：首页 > VUE

vue实现wms服务

2026-02-11 04:39:56VUE

Vue 中集成 WMS 服务的方法

使用 Leaflet 加载 WMS

安装 Leaflet 及 Vue 适配库：

npm install leaflet vue-leaflet

在 Vue 组件中初始化地图并加载 WMS 图层：

vue实现wms服务

<template>
  <div id="map" style="height: 500px;"></div>
</template>

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  mounted() {
    const map = L.map('map').setView([39.9, 116.4], 5);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    const wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows', {
      layers: 'ne:ne',
      format: 'image/png',
      transparent: true
    }).addTo(map);
  }
};
</script>

使用 OpenLayers 实现

安装 OpenLayers：

npm install ol

Vue 组件实现代码：

vue实现wms服务

<template>
  <div id="map" ref="mapContainer"></div>
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
import { fromLonLat } from 'ol/proj';

export default {
  mounted() {
    new Map({
      target: this.$refs.mapContainer,
      layers: [
        new TileLayer({
          source: new TileWMS({
            url: 'https://demo.boundlessgeo.com/geoserver/ows',
            params: {
              'LAYERS': 'ne:ne',
              'TILED': true
            }
          })
        })
      ],
      view: new View({
        center: fromLonLat([116.4, 39.9]),
        zoom: 5
      })
    });
  }
};
</script>

<style scoped>
#map {
  width: 100%;
  height: 500px;
}
</style>

使用 Mapbox GL 集成

安装 Mapbox GL：

npm install mapbox-gl

组件实现示例：

<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';
    this.map = new mapboxgl.Map({
      container: this.$refs.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [116.4, 39.9],
      zoom: 5
    });

    this.map.on('load', () => {
      this.map.addSource('wms-source', {
        type: 'raster',
        tiles: [
          'https://demo.boundlessgeo.com/geoserver/ows?service=WMS&version=1.1.1&request=GetMap&layers=ne:ne&styles=&format=image/png&transparent=true&width=256&height=256&srs=EPSG:3857&bbox={bbox-epsg-3857}'
        ],
        tileSize: 256
      });

      this.map.addLayer({
        id: 'wms-layer',
        type: 'raster',
        source: 'wms-source'
      });
    });
  },
  beforeDestroy() {
    if (this.map) this.map.remove();
  }
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 500px;
}
</style>