Vue中加载天地图的离线地图

要在Vue中加载天地图的离线地图，你可以使用L.TileLayer.WMTS插件来实现。以下是加载天地图离线地图的基本步骤：

1、首先，在Vue项目中安装Leaflet.js库和天地图离线地图插件。可以使用npm或yarn进行安装：

npm install leaflet
npm install @runsky/leaflet-tilelayer-wmts

2、创建一个Vue组件来显示地图，并引入Leaflet.js和天地图离线地图插件：

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

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-tilelayer-wmts/dist/leaflet-tilelayer-wmts.js';

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      const map = L.map('map').setView([39.9, 116.4], 10);

      // 添加天地图离线地图瓦片图层
      const wmtsUrl = 'path/to/offline/tiles/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png';
      const wmtsOptions = {
        layer: 'vec',
        style: 'default',
        format: 'tiles',
        matrixSet: 'c',
        maxZoom: 18
      };
      L.tileLayer.wmts(wmtsUrl, wmtsOptions).addTo(map);
    }
  }
};
</script>

<style>
#map {
  height: 400px;
}
</style>

在上述代码中，我们引入了Leaflet.js和天地图离线地图插件的依赖。在initMap方法中，我们创建了一个地图实例，并使用L.tileLayer.wmts方法来添加天地图离线地图瓦片图层。请将'path/to/offline/tiles/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png'替换为实际的离线瓦片文件的路径。

3、在Vue组件的路由或父组件中使用这个地图组件：

<template>
  <div>
    <MapComponent />
  </div>
</template>

<script>
import MapComponent from './MapComponent.vue';

export default {
  components: {
    MapComponent
  }
};
</script>