SOURCE

const key = '3602668176205a735014c430d4bfd5c4'
// 电子底图url
const vec_w_url = `http://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=${key}`

const projection = ol.proj.get('EPSG:3857')
const projectionExtent = projection.getExtent();
const size = ol.extent.getWidth(projectionExtent) / 256;
const resolutions = new Array(18);
const matrixIds = new Array(18);
for (let z = 1; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = z;
}

// 电子底图
const vecLayer = new ol.layer.Tile({
    opacity: 1.0,
    source: new ol.source.WMTS({
        url: vec_w_url,
        layer: 'vec',
        matrixSet: 'w',
        format: 'tiles',
        style: 'default',
        projection: projection,
        tileGrid: new ol.tilegrid.WMTS({
            origin: ol.extent.getTopLeft(projectionExtent),
            resolutions: resolutions,
            matrixIds: matrixIds
        }),
        wrapX: true
    })
})


const map = new ol.Map({
    target: 'map',
    layers: [ vecLayer ],
    view: new ol.View({
        center: ol.proj.fromLonLat([116.39123296750768, 39.907180309385694]),
        zoom: 8
    })
});

<div id="map"></div>

html,body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#map {
    height: 100%;
    width: 100%;
}

.button-wrap {
    position: absolute;
    left: 50px;
    top: 10px
}