GeoServer + shp + Vue +OpenLayers使用

一 GeoServer安裝

官網：http://geoserver.org/

安裝選擇war包，可直接部署至Tomcat webapps目錄下

URL爲http://ip:port/geoserver

默認賬號爲admin，密碼爲geoserver

登陸完成界面爲：

二發佈shp文件

2.1 新建工作區

點擊添加新的工作區按鈕，進入頁面：

按圖上設置即可。

2.2 發佈shp數據

點擊添加新的數據存儲按鈕，進入頁面，選擇shapefile。

然後按下圖進行配置即可，請注意shp文件應該在geoserver所在電腦上，這個意思是如果使用遠程服務器，應該首先將shp數據傳輸到遠程服務器才能讀取到。

保存之後會跳轉至以下頁面：

點擊發布，進入下面的頁面：

設置SRS爲EPSG:4326，點擊邊框下的按鈕，計算得出邊界。

保存即可。

三使用OpenLayers顯示圖像

本次實驗使用vue進行開發，首先安裝OpenLayers：

npm install ol

顯示圖像需要用到的很重要的參數是發佈圖像的URL，點擊Layer Preview按鈕，可進行數據圖像預覽，從而得到URL：

http://ip:port/geoserver/hs/wms?service=WMS&version=1.1.0&request=GetMap&layers=hs%3ABoundaryChn1_4l&bbox=73.44696044921875%2C3.408477306365967%2C135.08583068847656%2C53.557926177978516&width=768&height=624&srs=EPSG%3A4326&format=application/openlayers

這就很明白了，URL爲：http://ip:port/geoserver/hs/wms。

還需要指定layers屬性，指定bounds邊界。

使用OpenLayers顯示圖像比較容易，官網文檔中說的很明確了，下面貼出全部代碼：

<template>
  <div id="map" ref="rootMap" class="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.44696044921875,
            3.408477306365967,
            135.08583068847656,
            53.557926177978516
          ],
          source: new TileWMS({
            url: "http://ip:port/geoserver/hs/wms",
            // Layers需要指定要顯示的圖層名
            params: { LAYERS: "hs:BoundaryChn1_4l", 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: 100%;
}
</style>

展示結果：

GeoServer + shp + Vue +OpenLayers使用