Vue 离线地图

基于fs-extra实现，express提供地图图片转发使用nginx也可以

地图瓦片使用MapTileDownloader进行下载，下载后提供接口或者nginx文件服务进行访问

{
  "dependencies": {
    "@mapbox/mbtiles": "0.12.1",
    "core-js": "3.6.5",
    "express": "4.21.2",
    "fs-extra": "11.2.0",
    "leaflet": "1.9.4",
    "path": "0.12.7",
    "vue": "2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "vue-template-compiler": "^2.6.11"
  }
}

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

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  name: 'App',
  mounted() {
    // 修复默认图标路径
    delete L.Icon.Default.prototype._getIconUrl;
    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
      iconUrl: require('leaflet/dist/images/marker-icon.png'),
      shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
    });
 
    // 初始化地图
    const serverUrl = `your path`;

    const map = L.map('map').setView([38.8882, 121.5777], 16); 
    L.marker([38.8882, 121.5777])
        .addTo(map)
        .openPopup();
    // 加载离线瓦片（从 Node.js 服务）
    L.tileLayer(serverUrl + '/{z}/{x}/{y}.jpg', {
      maxZoom: 18,
      minZoom: 15,
      attribution: '© Offline Map using MBTiles',
    }).addTo(map);
</script>

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

• 上一篇