在Vue3中，使用高德地图2.0加载GeoServer瓦片地图

在Vue3中，可以通过以下步骤加载GeoServer瓦片地图：

1. 首先，在Vue项目中安装高德地图2.0和axios：

npm install vue-amap axios --save

2. 在main.js中引入高德地图2.0和axios：

import VueAMap from 'vue-amap';
import axios from 'axios';

Vue.use(VueAMap);
Vue.use(axios);

3. 在Vue组件中引入高德地图组件：

<template>
  <div>
    <amap :zoom="zoom" :center="center">
      <tile-layer :url="url" />
    </amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoom: 10,
      center: [116.397428, 39.90923],
      url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/map:village@EPSG:3857@png/{z}/{x}/{y}.png'
    }
  }
}
</script>

在上面的代码中，我们加载了GeoServer瓦片地图，其中url为GeoServer中瓦片地图的地址。

4. 在Vue组件中使用axios从GeoServer中获取瓦片地图的地址，并将其赋值给url：

<template>
  <div>
    <amap :zoom="zoom" :center="center">
      <tile-layer :url="url" />
    </amap>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      zoom: 10,
      center: [116.397428, 39.90923],
      url: ''
    }
  },
  mounted() {
    axios.get('http://localhost:8080/geoserver/gwc/service/wmts?request=GetTile&version=1.0.0&service=WMTS&layer=map:village&tilematrixset=EPSG:3857&format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}').then(res => {
      this.url = res.request.responseURL;
    });
  }
}
</script>

在上面的代码中，我们通过axios从GeoServer中获取瓦片地图的地址，并将其赋值给url。注意，上面的代码中的url为WMTS的地址，需要根据自己的情况修改。

这样，我们就成功地加载了GeoServer瓦片地图。