Leaflet 实现离线瓦片资源 + 飞线迁徙 + 自定义标记点位实现

npm install leaflet

注意构建webpack配置

module: {
    rules: [{
      test: /\.(png|jpg|gif|jpeg|svg)$/,
      include: /node_modules[\\/]leaflet/,
      use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: 'static/images'
            }
          }
       ]
    }
  ]
}
 

注意外部资源代理方式

proxy: {
 '/cdn': {
    target: 'https://' + ip + ':port',
    ws: true,
    secure: false
  }
}
 

注意引入方式

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
 
瓦片资源下载器

链接:https://pan.quark.cn/s/7fb319d394fb

实现效果图

源码地址:https://gitee.com/anily/leaflet

posted @ 2025-01-08 15:55  L大熊  阅读(209)  评论(0)    收藏  举报