Snake8859

openlayer加载geoserver地图服务

12/24/2022

# WMTS服务

以GeoServer自带的tiger:tiger_roads图层为例，首先可以图层信息中的Tile Caching的tab页看到该图层有哪些切图方案和瓦片支持的输出格式：

image-20210706143539652

在gridsets找到上面的切图方案详情，加载图层的时候要用到。

image-20210706144318995

image-2020112417081065

<!doctype html>
<html >
  <head>
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <style>
      .map {
        height: 90vh;
        width: 100%;
      }
    </style>
    <script src="lib/ol.js"></script>
    <title>OpenLayers example</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h2>OGC WMTS服务：加载GeoServer的WMTS服务</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        var nyc = [-73.92722,40.774221];
        var map = new ol.Map({
            target:"map",
            layers:[
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view:new ol.View({
                center:ol.proj.fromLonLat(nyc),
                zoom:12
            })
        });
        //分辨率数组，应与gridset中的Tile Matrix Set的Pixel Size保持一致
        var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125,0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5,5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
        //矩阵标识列表，应与gridset中的Tile Matrix Set的Name保持一致
        var matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4','EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11','EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18','EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];

        var wmtsSource = new ol.source.WMTS({
            url: 'http://localhost:8080/geoserver/gwc/service/wmts',
            layer: 'tiger:tiger_roads',
            matrixSet: 'EPSG:4326',
            format: 'image/png',
            projection: 'EPSG:4326',
            //瓦片网格对象，即切图方案gridset的配置
            tileGrid: new ol.tilegrid.WMTS({
                extent: [-180,-90, 180, 90],//范围
                tileSize: [256, 256],
                origin: [-180,90],  //切图原点（左上角:minx,maxy）
                resolutions: resolutions,
                matrixIds: matrixIds
            }),
            tileLoadFunction:function(imageTile, src) {
                imageTile.getImage().src = src;
            }
        });
        var wmtsLayer = new ol.layer.Tile({
            source: wmtsSource,
            //设置图层的边界，坐标参考与view中保持一致
 			extent:ol.proj.transformExtent([-74.02722,40.684221,-73.907005,40.878178],
                                "EPSG:4326","EPSG:3857")
        });
        map.addLayer(wmtsLayer);
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

通过创建ol.source.WMTS实例，配置WMTS服务信息：

  • url：WMTS服务的地址

  • layer：服务的图层名或图层组名，格式是：命名空间+“:”+图层名|图层组名

  • matrixSet：切图策略的名称（GridSet的名称）

  • format：指定响应瓦片的格式，可以在图层信息中的“Tile Caching”中查看，

  • projection：配置服务所属的坐标参考。如果与view中的参考不同会进行重投影

  • tileGrid：瓦片网格对象，即是服务的切图方案的配置对象，应与服务对应的GridSet保持一致，才能正确的计算瓦片的级别和行列号。

  • tileLoadFunction：瓦片加载函数。默认是上述的脚本，是WMTS服务的GetTile请求URL。

在创建Tile图层实例时，增加Extent参数限制数据源加载瓦片的边界（服务图层的边界），避免出现行列号索引越界的400的请求。

# WMS服务

在OpenLayers中加载WMS服务可以使用以下两种方式加载：

  • ol.layer.Image + ol.source.ImageWMS
  • ol.layer.Tile + ol.source.TileWMS

使用Tile的方式加载时，响应回来的瓦片会被浏览器缓存，当地图视口内的WMS服务被缓存后不会重复请求已经缓存的图片，但存在的问题是，如果首次发送的GetMap请求一直没有响应图片，后续将不会再发送该区域范围内的GetMap请求。在这种情况下，相比Tile的方式，ImageWMS的方式是渲染返回的单张图片会有更好的制图效果。

Image + ImageWMS

image-20201202111908212

<!doctype html>
<html >
  <head>
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="lib/ol.js"></script>
    <title>OpenLayers example</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h2>OGC WMS服务，方式一：ol.layer.Image + ol.source.ImageWMS</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        var layers = [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            new ol.layer.Image({
                source:new ol.source.ImageWMS({
                    url: 'http://localhost:8080/geoserver/tiger/ows',
                    params: {
                        //WIDTH, HEIGHT, BBOX and CRS (SRS for WMS version < 1.3.0) 将被动态设置.
                        'LAYERS': 'tiger:tiger_roads',
                        'VERSION':'1.1.1'//默认1.3.0,GeoServer为WMS提供1.1.1和1.3.0版本的支持
                    },
                    //远程WMS服务器的类型, mapserver, geoserver or qgis
                    serverType: 'geoserver',
                })
            }),
        ];
        var nyc = [-73.92722,40.774221];
        var map = new ol.Map({
            layers: layers,
            target: 'map',
            view: new ol.View({
                center:ol.proj.fromLonLat(nyc),
                zoom: 11
            })
        })
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

Tile + TileWMS

image-20201202111544388

<!doctype html>
<html >
  <head>
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="lib/ol.js"></script>
    <title>OpenLayers example</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h2>OGC WMS服务，方式二：ol.layer.Tile + ol.source.TileWMS</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        var layers = [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            new ol.layer.Tile({
                source: new ol.source.TileWMS({
                    url: 'http://localhost:8080/geoserver/tiger/ows',
                    params: {
                        //WIDTH, HEIGHT, BBOX and CRS (SRS for WMS version < 1.3.0) 将被动态设置.
                        'LAYERS': 'tiger:tiger_roads',
                        'TILED': false,
                        'VERSION':'1.1.0',
                        'TRANSPARENT':true//
                    },
                    //远程WMS服务器的类型
                    serverType: 'geoserver',
                    // 用于渲染的不透明度过渡的持续时间。要禁用不透明过渡，设置transition为: 0
                    transition: 0,
                    projection:'EPSG:4326'
                })
            })
        ];
        var nyc = [-73.92722,40.774221];
        var map = new ol.Map({
            layers: layers,
            target: 'map',
            view: new ol.View({
                center:ol.proj.fromLonLat(nyc),
                zoom: 11
            })
        })
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

根据请求参数可以知道，Tile的请求方式是将地图当前范围按图块大小（widthheight，默认为256256）分割计算出多个bbox，发送多个GetMap请求获取地图图片。而ImageWMS请求方式的参数中的宽高直接是地图当前视图的宽高，将当前地图视图范围作为bbox边界，获取单张地图图片。

# WFS服务

在Openlayers中，加载WFS服务使用到的是矢量数据源ol.source.Vector来加载数据和矢量图层ol.layer.Vector进行渲染。

在加载矢量数据时有两种方式（加载服务端的服务）：

  1. 在初始化矢量数据源ol.source.Vector时，使用url参数设置服务地址或返回服务地址的函数；
  2. 使用loader参数的加载函数。

两种方式都是请求WFS服务的GetFeature接口，将接口的返回的要素集使用对应的解析器format解析要素添加到数据源中，最后使用ol.layer.Vector渲染矢量要素。

在设置数据源的时候，需要主要一个叫strategy的参数。该参数用于配置WFS服务的加载策略，可选值有：

  • all（默认值），一次性加载服务中所有的要素；
  • bbox，加载地图当前视图范围内的要素；

image-20221224214624458

<!doctype html>
<html >
<head>
  <link rel="stylesheet" href="css/ol.css" type="text/css">
  <style>
    .map {
      height: 400px;
      width: 100%;
    }
  </style>
  <script src="lib/ol.js"></script>
  <title>OpenLayers example</title>
  <meta charset="UTF-8">
</head>
<body>
<h2>OGC WFS服务：加载GeoServer的WFS服务</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
  var nyc = [-73.92722,40.774221];
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
        source: new ol.source.Vector({
          format: new ol.format.GeoJSON(),
          url: function(extent) {
            //直接返回WFS的GetFeature接口访问地址，设置outputFormat为json格式和format中的解析器一致
            return 'http://localhost:8080/geoserver/wfs?service=WFS&' +
                    'version=1.1.0&request=GetFeature&typename=tiger:tiger_roads&' +
                    'outputFormat=application/json&srsname=EPSG:3857&' +
                    'bbox=' + extent.join(',') + ',EPSG:3857';
          },
          /*
          * 加载策略，可选值：
          *   all，一次性加载所有的要素；
          *   bbox，加载地图当前视图范围内的要素；
          *   tile，基于瓦片格网加载要素
          */
          strategy: ol.loadingstrategy.bbox
        }),
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2
          })
        })
      })
    ],
    target: 'map',
    view: new ol.View({
      center:ol.proj.fromLonLat(nyc),
      zoom: 11
    })
  })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
Last Updated: 8/6/2023, 3:51:38 PM

geoserver用户手册