1.layer-TileLayer(source:WMTS)

<template>
  <div class="test1-page">

    <div id="map" style="width: 500px;height: 500px;border:1px solid red"></div>

  </div>
</template>

<script>
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';
import {fromLonLat, get as getProjection} from 'ol/proj';

const getResolutions = (projection) => {
  let resolutions = [];
  if (projection === 'EPSG:4326') {
    resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.0003433227539062, 0.0001716613769531, 0.0000858306884766, 0.0000429153442383, 0.0000214576721191, 0.0000107288360596, 0.0000053644180298, 0.0000026822090149, 0.0000013411045074, 0.0000006705522537, 0.0000003352761269];
  }
  if (projection === 'EPSG:3857') {
    resolutions = [156543.03392804076, 78271.51696402022, 39135.75848201011, 19567.879241005117, 9783.939620502542, 4891.969810251271, 2445.9849051256383, 1222.9924525628178, 611.4962262814075, 305.7481131407024, 152.8740565703523, 76.43702828517615, 38.21851414258808, 19.10925707129404, 9.55462853564699, 4.777314267823495, 2.388657133911756, 1.1943285669558765, 0.5971642834779383, 0.2985821417389691, 0.1492910708694846, 0.0746455354347422, 0.0373227677173711, 0.0186613838586856, 0.0093306919293428]
  }
  return resolutions;
}
export default {
  name: '',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    // GeoServer WMTS 服务的 URL
    const wmtsUrl = 'http://43.143.213.90:8080/geoserver/gwc/service/wmts';

    // 要请求的图层名称和样式
    const layerName = 'xys:china-province';
    const styleName = '';

    let projectionCode = 'EPSG:4326';
    let center = [116, 38];

    if (1) {
      projectionCode = 'EPSG:3857';
      center = fromLonLat([116, 38])
    } else {
      projectionCode = 'EPSG:4326';
      center = [116, 38];
    }


    // 定义投影
    const projection = getProjection(projectionCode);

    // 定义分辨率
    const resolutions = getResolutions(projectionCode);

    // 构建 WMTS 瓦片网格
    const tileGrid = new WMTSTileGrid({
      tileSize: 256,
      extent: projection.getExtent(),
      resolutions: resolutions,
      matrixIds: [...Array(resolutions.length).keys()].map(i => projectionCode + ':' + i)
    });

    // 创建 WMTS 数据源
    const wmtsSource = new WMTS({
      url: wmtsUrl,
      layer: layerName,
      style: styleName,
      matrixSet: projectionCode,
      format: 'image/png',
      projection: projection,
      tileGrid: tileGrid
    });

    // 创建 WMTS 图层
    const wmtsLayer = new TileLayer({
      source: wmtsSource
    });

    // 创建地图
    const map = new Map({
      layers: [
        wmtsLayer
      ],
      target: 'map',
      view: new View({
        center: center,
        zoom: 3,
        projection: projection
      })
    });
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.test1-page {
  font-size: 14px;
}
</style>