OpenLayers5加载GeoServer WMS、WMTS服务

软件版本

OpenLayers 5.3.3
GeoServer 2.16.0
关于GeoServer如何发布WMS、WMTS服务请参考上一篇文章GeoServer数据服务发布及切片。如果您对什么是WMS、WMTS不太清楚的话，请参考WMS、WFS、WCS、WMTS服务。

WMS数据加载

直接上代码，代码中有详细的注释说明。
需引入一下OL包：

import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';

          //声明一个图层
          let tileLayer = new TileLayer({
            layerId: layer.id,//图层ID，非必须
            visible: visible,//图层是否可见，默认为可见
            opacity: opacity,//图层透明度，默认为1
            extent: [-180, -90, 180, 90],//图层显示的范围，可省略
            source: new TileWMS({//声明一个数据源，OpenLayers使用TileWMS接口来加载WMS服务
              url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
              params: {
                LAYERS: layer.layers,//图层名称如：'tasmania'
                VERSION: layer.version //版本如：'1.1.1'
              }
            })
          });
          this._map.addLayer(tileLayer);//将图层加入到地图容器中

WMTS数据加载

加载WMTS数据需用到OL包如下：

import TileLayer from 'ol/layer/Tile';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import {getTopLeft} from 'ol/extent.js';
import {get as getProjection} from 'ol/proj.js';

          // 切片名
          let 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'];

          // 切片大小
          let 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];
          let projection = getProjection('EPSG:4326');
          let projectionExtent = projection.getExtent();
          let tileLayer = new TileLayer({
            layerId: layer.id,
            visible: visible,
            opacity: opacity,
            extent: [-180, -90, 180, 90],
            source: new WMTS({
              url: layer.url,
              format: 'image/png',
              matrixSet: 'EPSG:4326',
              layer: layer.layers,
              projection: projection,
              tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
              }),
              wrapX: true
            })
          });
          this._map.addLayer(tileLayer);

扫描下方二维码，关注微信公众号，精彩内容同步更新