Vue中訪問Geoserver發佈的openlayer地圖服務

一，geoserver發佈地圖服務

詳見：https://blog.csdn.net/qq_40323256/article/details/104964048

二，引入ol

cnpm i ol -S

三，根據圖層預覽中的URL，配置以下代碼

URL：http://localhost:8090/geoserver/ws-world/wms?service=WMS&version=1.1.0&request=GetMap&layers=ws-world%3Amychina&bbox=73.4412841796875%2C18.159912109375%2C135.0869140625%2C53.5618896484375&width=768&height=441&srs=EPSG%3A4326&format=application/openlayers

<template>
  <div id="map"></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";

export default {
  data() {
    return {
      map: null
    };
  },
  methods: {
    init() {
      var layers = [
        new TileLayer({
          extent: [// 邊界
            73.4412841796875,
           18.159912109375,
           135.0869140625,
            53.5618896484375
          ],
		  // http://localhost:8090/geoserver/ws-world/wms?service=WMS&version=1.1.0&request=GetMap&layers=ws-world%3Amychina&bbox=73.4412841796875%2C18.159912109375%2C135.0869140625%2C53.5618896484375&width=768&height=441&srs=EPSG%3A4326&format=application/openlayers
          source: new TileWMS({
            url: "http://localhost:8090/geoserver/ws-world/wms",
            // Layers需要指定要顯示的圖層名
            params: { LAYERS: "ws-world:mychina", TILED: true },
           	// serverType明顯爲geoserver
            serverType: "geoserver",
            // Countries have transparency, so do not fade tiles:
            transition: 0
          })
        })
      ];
      this.map = new Map({
        layers: layers,
        target: "map",
        view: new View({
          projection: "EPSG:4326",
          center: [115, 39],
          zoom: 4
        })
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style scoped>
#map {
  height: 100vh;
  width: 100vw;
}
</style>

四，展示

如果還想疊加地圖，代碼實現如下：

<template>
	<div id="map"></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 OSM from 'ol/source/OSM';
import { defaults as defaultControls } from 'ol/control';
import ZoomSlider from 'ol/control/ZoomSlider';

export default {
	name: '',
	data() {
		return {
			map: null
		};
	},
	mounted() {
		this.initMap();
	},
	methods: {
		// 地圖單擊事件
		singleClickFun() {
			this.map.on('singleclick', event => {
				console.log(event);
			});
		},

		// 初始化地圖
		initMap() {
			let view = new View({
				projection: 'EPSG:4326',
				center: [115, 39],
				zoom: 4
			});
			let layer = new TileLayer({
				source: new OSM(),
				visible: true,
				zIndex: 1,
				name: 'OSM'
			});
			this.map = new Map({
				layers: [],
				target: 'map',
				view: view,
				controls: defaultControls().extend([new ZoomSlider()])
			});
			this.map.addLayer(layer);

			// 加載 GeoServer 發佈的 wms 服務
			let wmsLayer = new TileLayer({
				extent: [
					// 邊界
					73.4412841796875,
					18.159912109375,
					135.0869140625,
					53.5618896484375
				],
				source: new TileWMS({
					url: 'http://localhost:8090/geoserver/ws-world/wms',
					// Layers需要指定要顯示的圖層名
					params: { LAYERS: 'ws-world:mychina', TILED: true },
					// serverType明顯爲geoserver
					serverType: 'geoserver',
					// Countries have transparency, so do not fade tiles:
					transition: 0
				}),
				visible:true,
				zIndex: 2,
				className: 'wms'
			});
			this.map.addLayer(wmsLayer);

			this.singleClickFun();
		}
	}
};
</script>
<style scoped>
#map {
  height: 100vh;
  width: 100vw;
}
</style>

效果圖：