在Vue3中，使用AMap.TileLayer.WMTS

在Vue3中使用AMap.TileLayer.WMTS需要先引入AMap API和AMapUI组件库。

引入AMap API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>

引入AMapUI组件库：

<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
<link rel="stylesheet" href="https://webapi.amap.com/ui/1.0/ui/misc/MarkerList/examples/css/index.css"/>

然后在Vue组件中使用AMap.TileLayer.WMTS，示例代码如下：

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

<script>
  import AMap from 'AMap'

  export default {
    mounted() {
      const map = new AMap.Map('map', {
        zoom: 13,
        center: [116.397428, 39.90923]
      })

      const layer = new AMap.TileLayer.WMTS({
        url: 'https://wmts.amap.com/wmts',
        params: {
          'VERSION': '1.0.0',
          'LAYERS': 'map',
          'STYLE': 'default',
          'TILEMATRIXSET': 'w',
          'FORMAT': 'image/png'
        },
        tileUrls: [
          'https://wmts.amap.com/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=map&TILEMATRIXSET=w&FORMAT=image/png&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
          'https://wmts.amap.com/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=map&TILEMATRIXSET=w&FORMAT=image/png&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
          'https://wmts.amap.com/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=map&TILEMATRIXSET=w&FORMAT=image/png&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
          'https://wmts.amap.com/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=map&TILEMATRIXSET=w&FORMAT=image/png&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
        ],
        tileOpt: {
          'crossOrigin': 'anonymous'
        }
      })

      map.add(layer)
    }
  }
</script>

其中，url是WMTS服务地址，params是WMTS服务参数，tileUrls是瓦片地址列表，tileOpt是瓦片选项配置。在mounted生命周期中，创建AMap.Map对象，然后创建AMap.TileLayer.WMTS对象，最后将瓦片图层添加到地图中即可。