vue3中加载的geoserver图层叠加到天地图影像图时，放大影像图时geoserver图层没有贴在影像图上

这个问题可能是由于地图投影不一致导致的。请确保你的天地图影像图和geoserver图层都使用相同的投影。你可以在Vue3中使用proj4js库来进行投影转换。具体的步骤如下：

1. 在Vue3中安装proj4js库：`npm install proj4`

2. 在Vue3中引入proj4js库：

   import proj4 from 'proj4'

3. 定义你的投影：

   proj4.defs([
     [
       'EPSG:4326',
       '+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees'
     ],
     [
       'EPSG:3857',
       '+title=Web Mercator +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs'
     ]
   ]);

4. 将你的天地图影像图和geoserver图层的投影转换为相同的投影：

   let tdtProjection = 'EPSG:3857'; // 天地图影像图的投影
   let geoserverProjection = 'EPSG:3857'; // geoserver图层的投影

   let tdtLayer = new TileLayer({
     source: new XYZ({
       url: 'http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0' +
           '&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default' +
           '&format=tiles',
       projection: tdtProjection
     })
   });

   let geoserverLayer = new TileLayer({
     source: new XYZ({
       url: 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' +
           'workspace:layer@EPSG%3A3857@png/{z}/{x}/{-y}.png',
       projection: geoserverProjection
     })
   });

   // 转换为相同的投影
   let transform = proj4(tdtProjection, geoserverProjection).forward;
   tdtLayer.getSource().setTileUrlFunction(function (tileCoord) {
     let xyz = [tileCoord[1], tileCoord[2], -tileCoord[0] - 1];
     xyz = transform(xyz);
     return 'http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0' +
         '&LAYER=img&tileMatrixSet=w&TileMatrix=' + xyz[2] + '&TileRow=' + xyz[1] +
         '&TileCol=' + xyz[0] + '&style=default&format=tiles';
   });
   geoserverLayer.getSource().setTileUrlFunction(function (tileCoord) {
     let xyz = [tileCoord[1], tileCoord[2], -tileCoord[0] - 1];
     xyz = transform(xyz);
     return 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' +
         'workspace:layer@EPSG%3A3857@png/' + xyz[2] + '/' + xyz[0] + '/' + xyz[1] + '.png';
   });

5. 将天地图影像图和geoserver图层添加到地图中：

   let map = new Map({
     target: 'map',
     layers: [tdtLayer, geoserverLayer],
     view: new View({
       center: [0, 0],
       zoom: 2,
       projection: tdtProjection
     })
   });

通过以上步骤，你应该可以将geoserver图层正确地叠加在天地图影像图上，并且在放大和缩小地图时，geoserver图层应该会正确地贴在天地图影像图上。