場景

Openlayers下載與加載geoserver的wms服務顯示地圖：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114320531

在上面使用Openlayers加載wms服務顯示地圖的基礎上，如果想要在Vue中使用Openlayers加載地圖怎么用。

在上面使用圖層預覽后可以直接在網頁中顯示wms地圖

?

ImageWMS與TileWMS的區別

相同點：都是加載WMS服務。
不同點：TitleWMS會把當前可視窗口根據網格（開發者可以在調用OpenLayers api的時候自定義）切分，一片一片地返回回來，在前端進行整合。而ImageWMS則不會進行切割，每次請求都是只會返回一個當前窗口可見地地圖圖片。如果WMS服務對應地數據比較大并且網絡條件不是很好的時候，TileWMS交互體驗更好一點（因為做了切割，每次返回回來的圖片大小都比較小），而ImageWMS是返回一整個圖片，看起來會有較大的卡頓時間，交互感覺不好。

切片方式（TileWMS）：動態地圖在GIS Server生成后，以切片的方式返回到前端，優點是將地圖切分，每個切片的數據量很小，便于數據的傳輸，適用于網絡狀況不佳的環境；缺點是在地圖切片的過程中，可能會造成我遇到的 標注多次出現的問題。
圖像方式（ImageWMS）：地圖生成后，直接以一個整體返回到前端顯示，優點是不會出現標注重復出現的問題，確定是對網絡狀況不佳的環境，可能出現請求失敗的問題。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先搭建一個Vue項目，這里使用快速開發框架搭建如下

若依前后端分離版手把手教你本地搭建環境并運行項目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

Vue中安裝Openlayers

npm install ol

然后我們新建一個組件olMapImageWMS.vue

在此組件中首先增加一個div用來顯示地圖

<template><div id="map" class="map"></div> </template>

并且設置id，后面用來渲染地圖用，然后設置一些樣式

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

然后導入一些相關模塊

//導入基本模塊 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; //導入相關模塊 import ImageWMS from "ol/source/ImageWMS"; import Image from "ol/layer/Image";

然后在mounted方法中執行地圖初始化的方法initMap

? mounted() {this.initMap();},

在地圖初始化的方法中

首先新建一個layers圖層名為image

????? var image = new Image({source: new ImageWMS({//不能設置為0，否則地圖不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",FORMAT: "image/png",},serverType: "geoserver",}),});

注意這里的參數要與自己上面使用geoserver發布的wms預覽中的一致

url就是預覽地址中的問號前面部分

?

params中的相關參數，可以在預覽界面中查看源代碼獲取

?

注意這里的FORMAT是image/png

然后新建地圖對象

????? this.map = new Map({//地圖容器IDtarget: "map",//引入地圖layers: [image],view: new View({//地圖中心點center: [987777.93778, 213834.81024],zoom: 12,// minZoom:1, // 地圖縮放最小級別}),});

這里需要主要的是target的參數值對應的是上面div的id，用來設置地圖容器的id

然后layers設置圖層時就是上面新建的image圖層對象

然后就是設置地圖的中心點，可以在預覽界面中獲取要顯示地圖時的中心點

?

組件完整代碼

<template><div id="map" class="map"></div> </template><script> //導入基本模塊 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; //導入相關模塊 import ImageWMS from "ol/source/ImageWMS"; import Image from "ol/layer/Image"; export default {name: "olMapImageWMS",data() {return {};},mounted() {this.initMap();},methods: {initMap() {var image = new Image({source: new ImageWMS({//不能設置為0，否則地圖不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",FORMAT: "image/png",},serverType: "geoserver",}),});this.map = new Map({//地圖容器IDtarget: "map",//引入地圖layers: [image],view: new View({//地圖中心點center: [987777.93778, 213834.81024],zoom: 12,// minZoom:1, // 地圖縮放最小級別}),});},}, }; </script><style scoped> .map {width: 100%;height: 800px; } </style>

然后在需要顯示地圖的頁面引入并顯示組件

<template><div class="app-container home"><el-row :gutter="20"><olMapImageWMS></olMapImageWMS></el-row><el-divider /></div> </template><script> import olMapImageWMS from "@/components/olMap/olMapImageWMS"; export default {name: "index",components: {olMapImageWMS,},

然后啟動項目，訪問頁面查看效果

?

?

?

總結

以上是生活随笔為你收集整理的Vue中使用Openlayers加载Geoserver发布的ImageWMS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。