前言

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

内容概览

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

效果图


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

  • html 地图界面
<html>
<head>
<title>Leaflet入门开发系列地图分屏</title>
<style>
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.left{
width: 50%;
height: 100%;
float: left;
/* border: 1px solid #f40; */
}
.right {
width: 50%;
height: 100%;
float: left;
/* border: 1px solid #f40; */
}
</style>
</head>
<body>
<div class="left" id="LMap"></div>
<div class="right" id="RMap"></div>
<script src="splitScreen.js"></script>
</body>
</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小专栏

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

leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)的更多相关文章

  1. openlayers4 入门开发系列之地图工具栏篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  2. openlayers4 入门开发系列之地图切换篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  3. openlayers4 入门开发系列之地图展示篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  4. arcgis api 3.x for js 入门开发系列十三地图最短路径分析(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. arcgis api for js入门开发系列六地图分屏对比(含源代码)

    上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...

  6. arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. openlayers4 入门开发系列之聚合图篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  8. openlayers4 入门开发系列之迁徙图篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. openlayers4 入门开发系列结合 echarts4 实现散点图(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. JS---变速动画函数封装

    变速动画函数封装 匀速动画:每次步数都是10 (var step=10;) 变速(缓动)动画:每次的步数是用当前位置和目标位置相减 var step=(target-current)/10; 代码如下 ...

  2. BASH Shell 文件管理

    BASH Shell 对文件进行管理 ========================================================创建.复制.删除.移动.查看.编辑.压缩.查找 内 ...

  3. CentOS 7 离线环境安装nginx时报错:./configure: error: C compiler cc is not found

    先说解决方法: 在nginx目录下,查看objs/autoconf.err文件,该文件记录了具体的错误信息 vi objs/autoconf.err 一般就是缺少一些文件,因为我的gcc.g++也是离 ...

  4. SpringBoot+idea搭建微服务简化流程

    作者:个人微信公众号:程序猿的月光宝盒 1.新建普通maven工程 2.在父级pom中按需修改 3.删除父级src目录 4.创建公共模块common,里面只有service接口和实体类 5.构建微服务 ...

  5. 基于titanic数据集预测titanic号旅客生还率

    数据清洗及可视化 实验内容 数据清洗是数据分析中非常重要的一部分,也最繁琐,做好这一步需要大量的经验和耐心.这门课程中,我将和大家一起,一步步完成这项工作.大家可以从这门课程中学习数据清洗的基本思路以 ...

  6. Refresh design pattern

    多年后, 再次翻阅设计模式书籍, 将每种模式的要点总结于此, 需要本身有一定设计模式基础, 再结合要点, 帮助更好理解与运用. 策略模式 (Strategy) 附加功能单独抽象不同接口 功能以组合方式 ...

  7. 基于Maven 的 Spring MVC

    Spring MVC 他是基于MVC的设计模式做出来的,他是Spring对Servlet的进一步的封装 MVC:Model  View  Controller 如何使用Spring MVC?(Spri ...

  8. html中的框架frameset和frame及iframe

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面,简而言之,就是在一个窗口中显示多个页面. 每个页面称之为一个框架.并且每个框架独立 ...

  9. Java_map的key为自定义对象

    首先自定义Key对象 import lombok.AllArgsConstructor; import lombok.Getter; import lombok.Setter; import java ...

  10. Markdown数学公式语法

    详细网址:Markdown数学公式语法