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-pro
9c22
tobuf;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中需要配置

三 加载栅格数据

—-未完待续—-