場景

Openlayers下載與加載geoserver的wms服務(wù)顯示地圖：

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

Vue中使用Openlayers加載Geoserver發(fā)布的ImageWMS：

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

在上面已經(jīng)加載ImageWMS的基礎(chǔ)上，想要加載TileWMS

ImageWMS與TileWMS的區(qū)別

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

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

注：

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

實現(xiàn)

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

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

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

Vue中安裝Openlayers

npm install ol

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

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

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

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

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

然后導(dǎo)入一些相關(guān)模塊

//導(dǎo)入基本模塊 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; //導(dǎo)入相關(guān)模塊 import { Tile as TileLayer } from 'ol/layer' import { TileWMS } from 'ol/source'

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

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

在地圖初始化的方法中

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

????? var layer = new TileLayer({source: new TileWMS({//不能設(shè)置為0，否則地圖不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",tiled: true},serverType: "geoserver",}),});

注意這里的參數(shù)要與自己上面使用geoserver發(fā)布的wms預(yù)覽中的一致

url就是預(yù)覽地址中的問號前面部分

?

然后新建地圖對象

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

這里需要主要的是target的參數(shù)值對應(yīng)的是上面div的id，用來設(shè)置地圖容器的id

然后layers設(shè)置圖層時就是上面新建的layer圖層對象

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

?

組件完整代碼

<template><div id="map" class="map"></div> </template><script> //導(dǎo)入基本模塊 import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; //導(dǎo)入相關(guān)模塊 import { Tile as TileLayer } from 'ol/layer' import { TileWMS } from 'ol/source' export default {name: "olMapImageWMS",data() {return {};},mounted() {this.initMap();},methods: {initMap() {var layer = new TileLayer({source: new TileWMS({//不能設(shè)置為0，否則地圖不展示。ratio: 1,url: "http://localhost:8000/geoserver/nyc/wms",params: {LAYERS: "nyc:nyc_roads",STYLES: "",VERSION: "1.1.1",tiled: true},serverType: "geoserver",}),});this.map = new Map({//地圖容器IDtarget: "map",//引入地圖layers: [layer],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"><olMapTileWMS></olMapTileWMS></el-row><el-divider /></div> </template><script> import olMapTileWMS from "@/components/olMap/olMapTileWMS"; export default {name: "index",components: {olMapTileWMS,},

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

?

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。