Vue中使用Openlayers加載Geoserver發布的ImageWMS

場景

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({
        //地圖容器ID
        target: "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({
        //地圖容器ID
        target: "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,
  },

 

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