場(chǎng)景

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ū)別

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

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

注：

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

實(shí)現(xiàn)

首先搭建一個(gè)Vue項(xiàng)目，這里使用快速開(kāi)發(fā)框架搭建如下

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

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

Vue中安裝Openlayers

npm install ol

然后我們新建一個(gè)組件olMapTileWMS.vue

在此組件中首先增加一個(gè)div用來(lái)顯示地圖

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

并且設(shè)置id，后面用來(lái)渲染地圖用，然后設(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();},

在地圖初始化的方法中

首先新建一個(gè)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ù)覽地址中的問(wèn)號(hào)前面部分

?

然后新建地圖對(duì)象

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

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

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

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

?

組件完整代碼

<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({//地圖中心點(diǎn)center: [987777.93778, 213834.81024],zoom: 12,// minZoom:1, // 地圖縮放最小級(jí)別}),});},}, }; </script><style scoped> .map {width: 100%;height: 800px; } </style>

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

<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,},

然后啟動(dòng)項(xiàng)目，訪(fǎng)問(wèn)頁(yè)面查看效果

?

?

總結(jié)

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

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