leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)

前言

leaflet-webpack 入门开发系列环境知识点了解：

• node 安装包下载
  webpack 打包管理工具需要依赖 node 环境，所以 node 安装包必须安装，上面链接是官网下载地址
• webpack 配置介绍文档
  详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学
  
• vscode 安装包下载，我这边用 vscode工具编译开发前端项目，个人觉的这款工具还不错
• leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等
• leaflet 在线例子
• leaflet 插件，leaflet 的插件库，非常有用

内容概览

leaflet 地图分屏对比
源代码 demo 下载

效果图

实现思路：创建左右并排的两个 div，各种渲染左右两个不同地图对象，然后同时监听左右两个地图的 drag 以及 mousemove 事件，在事件里面设置两个地图的当前范围一致 map. setView(_this.getCenter(),_this.getZoom());

• html 地图界面

• 创建左右地图初始化

//左侧地图
const LMap = L.map("LMap", {
attributionControl: false
}).setView(config.mapInitParams.center, config.mapInitParams.zoom);
//右侧地图
const RMap = L.map("RMap", {
attributionControl: false
}).setView(config.mapInitParams.center, config.mapInitParams.zoom);

完整demo源码见小专栏文章尾部：GIS之家leaflet小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波