vue3+ts使用高德离线地图

下载离线地图瓦片

首先需要下载离线地图瓦片，可以在高德地图官网上下载，也可以使用第三方工具下载。下载完成后，将瓦片文件放置在项目的public目录下，例如：public/map。

安装高德地图SDK

在项目中安装高德地图SDK，可以使用npm或yarn安装：

npm install @types/amap-js-api --save-dev

或者

yarn add @types/amap-js-api --dev

安装高德地图SDK

创建地图组件
在Vue3项目中，可以使用setup函数创建地图组件。首先需要引入AMap和AMap.TileLayer类：

import AMap from 'AMap';
import 'AMap.TileLayer';

然后在setup函数中创建地图实例和瓦片图层：

import { defineComponent, onMounted } from 'vue';
import AMap from 'AMap';
import 'AMap.TileLayer';

export default defineComponent({
  setup() {
    let map: AMap.Map;
    let tileLayer: AMap.TileLayer;

    onMounted(() => {
      // 创建地图实例
      map = new AMap.Map('map-container', {
        zoom: 13,
        center: [116.397428, 39.90923],
      });

      // 创建瓦片图层
      tileLayer = new AMap.TileLayer({
        zooms: [3, 18],
        tileSize: 256,
        getTileUrl: (x: number, y: number, z: number) => {
          return `/map/${z}/${x}/${y}.png`;
        },
      });

      // 添加瓦片图层到地图
      map.add(tileLayer);
    });

    return {
      map,
    };
  },
});

在上面的代码中，我们创建了一个地图实例和一个瓦片图层。瓦片图层的getTileUrl方法返回瓦片图层的URL，这里使用了相对路径，因为瓦片图层文件已经放置在public/map目录下。

在模板中使用地图组件

最后，在模板中使用地图组件：

<template>
  <div id="map-container" style="height: 500px;"></div>
</template>

这样就可以在Vue3+TS项目中使用离线高德地图了。