Openlayers6+Geoserver+WTMS

openlayers6网上大部分加载切片都是使用wms服务,本文介绍是以openlayers6为前端框架，geoserver为地图框架加载切片图层组。wtms相比较tms加载速度更快，但是再不同的缩放级别会出现偏移。

加载geoserver的切片图层组的时候要注意每个级别的原点，否则会出现偏移。确定每个级别的原点点击这里。

• 导入相关的模块

import "ol/ol.css"
import Map from "ol/Map"
import View from "ol/View"
import TileLayer from "ol/layer/Tile"
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';

• 根据Gridsets获取相关信息

 //切片名称
var gridNames = ['basemapnew:0', 'basemapnew:1', 'basemapnew:2', 'basemapnew:3', 'basemapnew:4', 'basemapnew:5', 'basemapnew:6', 'basemapnew:7', 'basemapnew:8', 'basemapnew:9', 'basemapnew:10', 'basemapnew:11'];
    //切片大小
    var resolutions = [323.56615759999994, 161.78167879999998, 80.89083799999999, 40.445420399999996,20.2227088,10.1113544, 5.0556772, 2.52784, 1.26392, 0.63196, 0.31598, 0.15799];
    //每个级别原点
    var origins=[
                [4052.327672494035,131437.87578794747],
                [4052.327672494035,131436.44218794748],
                [4052.327672494035,131436.43932074748],
                [4052.327672494035,121082.41743274749],
                [4052.327672494035,121082.40668074749],
                [4052.327672494035,121082.40668074749],
                [4052.327672494035,121082.40668074749],
                [4052.327672494035,121082.4926967475],
                [4052.327672494035,120758.92917674751],
                [4052.327672494035,120758.92917674751],
                [4052.327672494035,120678.03829674749],
                [4052.327672494035,120637.5928567475]
            ]
           //坐标系
           var projection = new Projection({
                        code: 'EPSG:2435',
                        units: 'm',
                        axisOrientation: 'neu'
           });

• 请求地址的相关信息配置

 var tile=
            new TileLayer({
                source: new WMTS({
 
                     url: this.url+'geoserver/gwc/service/wmts',
                    //切片信息
                    tileGrid: new WMTSTileGrid({
                        tileSize: [256, 256],
                        //图层范围
                        extent: [4052.327672494035,-34227.9969032525,1.2263326906821292E7,131437.87578794747],
                        // origin: [4052.327672494035, 131437.87578794747],  //会有偏移
                        origins:origins,
                        resolutions: resolutions,
                        matrixIds: gridNames
                    }),
                    //图层名
                    layer: 'basemap:basemap',
                    format: 'image/png',
                    // projection: projection,
                     //切片策略
                    matrixSet: 'basemapnew',
                    version:'1.0.0',
                    cacheSize:512,
                    style: '',
                    wrapX: true,
                })
            })

• 设置中心点等加载地图。

 this.map = new Map({
            target: "mapDivRef",
            layers: [tile],
            view: new View({
                center: [4052.327672494035,131437.87578794747], 
                //限制图层显示范围。
                //extent: [4052.327672494035,-34227.9969032525,12263326.906821292,131437.87578794747],
                zoom:1,
                projection: projection,
            }),
        })

• 加载效果