Geoserver Openlayers 加載數據總結

經過一段時間的踩坑，現在總結一下利用Openlayers加載地圖數據方法。

一 加載天地圖、百度地圖數據

openlayers3加載天地圖數據
OpenLayers 3加載百度地圖

注意其中的‘’確定服務地址‘’部分，在瀏覽器中F12查看Network，可以清楚地看到每一個地圖數據的加載過程和服務器地址，更具這些就可以確定如何使用openlayers加載數據。
天地圖數據是一個切片數據，可以使用XYZ切片座標來定位。其中Z表示切片的層級(zoom)，類似於影像金字塔的層級；X表示切片的行號；Y表示切片的列號。

---

二 加載矢量數據

加載矢量數據目前我知道的方法有WMS、WFS、WMTS三種方法。

1. WMS方法

WMS方法返回的是PNG或者是TIF格式的圖片。調用方法如下：

var layer = new ol.layer.Tile({
      source: new ol.source.TileWMS({
          url: 'https://ahocevar.com/geoserver/wms',
          params: {'LAYERS': 'topp:states'},
          serverType: 'geoserver'
        })
      });

優點：加載的是切片數據，加載速度很快。
缺點： 由於返回的是圖片，不能對矢量數據設置Style從而改變顏色等等

2. WFS方法

WFS方法返回的是矢量數據，在Geoserver的WFS列表中可以看到有GML、KML、CSV、GeoJSON、Shapefile(Openlayers不支持解析該類型數據)，這裏以返回GeoJSON格式爲例。在Geoserver中以GeoJSON格式打開可以發現服務器的地址爲：

http://localhost:8080/geoserver/sf/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sf:roads&maxFeatures=50&outputFormat=application/json

所以可以使用改地址來獲取WFS數據。調用代碼如下：

var layer = new ol.layer.Vector({
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function (extent) {
            return 'http://localhost:8080/geoserver/LuoYuanCity/ows?service=WFS&' +
                'version=1.1.0&request=GetFeature&typename=topp:states&' +
                'outputFormat=application/json&srsname=EPSG:3857&' +
                'bbox=' + extent.join(',') + ',EPSG:3857';
        },
        strategy: ol.loadingstrategy.bbox
    }),
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 1.0)',
        })
    })
});

該代碼使用的是帶有外部邊界範圍的方式，也就是每次只向服務器請求範圍內的數據。使用ol.format.GeoJSON格式來解析返回的數據。最後使用Style來設置矢量數據的顯示樣式。
優點：可以返回矢量數據。
缺點：每次返回的數據量有點大，因爲他返回了範圍內部的所有矢量數據。

3. WMTS

GIS數據與OGC標準地圖服務和矢量切片
GIS 矢量切片（Vector Tile）
在GeoServer中，默認使用了image/jpeg和image/png格式來對矢量、柵格數據進行切片處理，切片得到的是圖片數據，這也就是爲什麼我們採用TileWMS方式加載數據比較快的原理。但是我們需要返回的是矢量數據，這裏就需要對矢量數據進行切片處理。安裝切片插件之後，GeoServer支持四種切片方式，這裏以application/x-protobuf;type=mapbox-vector爲例，因爲openlayers的ol.format.MVT處理矢量數據更加高效。調用代碼如下：

var layer = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
        format: new ol.format.MVT(),
        tileGrid: ol.tilegrid.createXYZ({ maxZoom: 21 }),
        tilePixelRatio: 1,
        url: "http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&" +
            "SERVICE=WMTS&VERSION=1.0.0&LAYER=topp:states&STYLE=&" +
            "TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&" +
            "FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}"
    }),
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(255,0,0,1.0)'
        })
    })
})

其中url的地址還可以設置成：

'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/topp:states@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf'

注意：第一個url的行號爲y，第二個是-y。第一個使用的是wmts服務，第二個使用的是tms服務。其中maxZoom: 21指的是最大的切片層級是22，這個可以在Geoserver中查看。具體函數的說明請參考官方文檔。

優點：速度快，每次只加載部分數據
缺點：在Geoserver中需要配置

---

三 加載柵格數據

—-未完待續—-