OpenLayers中提供了调用WMTS服务的接口。其主要思想是先构建切片信息，再传入服务信息即可。切片信息包括切片名、切片大小、切片范围等。这些切片信息都可以在GeoServer中Gridsets中找到，按照其中的切片信息构建相应的请求方法即可。

1、在GeoServer的Gridsets中查看切片信息

image.png

2、在GeoServer中预览WMTS地图服务

image.png

3、代码实现

<template>
    <div id="mainDiv">

    </div>
</template>

<script>
    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import {getWidth, getTopLeft} from 'ol/extent.js';
    import TileLayer from 'ol/layer/Tile.js';
    import {get as getProjection} from 'ol/proj.js';
    import OSM from 'ol/source/OSM.js';
    import WMTS from 'ol/source/WMTS.js';
    import WMTSTileGrid from 'ol/tilegrid/WMTS.js';

    export default {
        name: 'OpenlayersViewer2',
        data () {
            return {
                map:''
            }
        },
        mounted:function(){
            //设置地图投影
            var projection = getProjection('EPSG:4326');
            var projectionExtent = projection.getExtent();

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

            this.map = new Map({
                target: 'mainDiv',
                view: new View({
                    center: [122, 40],
                    zoom: 9,
                    projection:'EPSG:4326'
                }),
                layers: [
                    new TileLayer({
                        source: new WMTS({
                            url: 'http://localhost:8080/geoserver/gwc/service/wmts',
                            layer: 'wzf:wafangdianshi_0',
                            matrixSet: 'EPSG:4326',
                            format: 'image/png',
                            projection: projection,
                            tileGrid: new WMTSTileGrid({
                                origin: getTopLeft(projectionExtent),
                                resolutions: resolutions,
                                matrixIds: matrixIds
                            }),
                            wrapX: true
                        })
                    })
                ]
            });
        }
    }
</script>


<style scoped>
    #mainDiv{
        width:100%;
        height:100%;
    }
</style>

image.png