vue 离线加载mapbox mbtiles代码

要在Vue中离线加载Mapbox MBTiles，你可以使用Mapbox GL JS插件和Mapbox GL JS Offline插件。下面是一些代码示例：

1. 安装Mapbox GL JS和Mapbox GL JS Offline插件：

npm install mapbox-gl mapbox-gl-offline --save

2. 在Vue组件中引入Mapbox GL JS和Mapbox GL JS Offline插件：

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import MapboxOffline from 'mapbox-gl-offline';

Vue.use(MapboxOffline);

3. 在Vue组件中定义并加载MBTiles地图：

<template>
  <div ref="map" class="map"></div>
</template>

<script>
export default {
  mounted() {
    mapboxgl.accessToken = 'your-access-token';

    const map = new mapboxgl.Map({
      container: this.$refs.map,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-122.4194, 37.7749],
      zoom: 12,
      maxZoom: 18,
      minZoom: 10,
      hash: true,
      customAttribution: '',
      plugins: [MapboxOffline],
    });

    map.addControl(new mapboxgl.NavigationControl(), 'top-right');

    map.on('load', () => {
      map.addSource('offline', {
        type: 'offline',
        tiles: ['path/to/your/tiles/{z}/{x}/{y}.pbf'],
        minzoom: 10,
        maxzoom: 18,
        bounds: [-122.5194, 37.6049, -122.2194, 37.9649],
        scheme: 'xyz',
      });

      map.addLayer({
        id: 'offline-layer',
        type: 'fill',
        source: 'offline',
        paint: {
          'fill-color': '#088',
          'fill-opacity': 0.4,
        },
      });
    });
  },
};
</script>

<style>
.map {
  height: 100%;
  width: 100%;
}
</style>

这个例子中，我们加载了一个名为"offline"的MBTiles地图源，并添加了一个名为"offline-layer"的填充图层。你需要将"tiles"属性中的"path/to/your/tiles"替换为你的MBTiles文件所在的路径。"bounds"属性定义了地图范围，"minzoom"和"maxzoom"属性定义了地图的最小和最大缩放级别。

注意，在上述代码中，我们使用了Mapbox GL JS Offline插件中的"offline"图层类型。这个类型是Mapbox GL JS的一个扩展，是为了支持离线地图加载而创建的。