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 地图界面
<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 入门开发系列三地图分屏对比(附源码下载)的更多相关文章
- openlayers4 入门开发系列之地图工具栏篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之地图切换篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之地图展示篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- arcgis api 3.x for js 入门开发系列十三地图最短路径分析（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
- arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- openlayers4 入门开发系列之聚合图篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之迁徙图篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列结合 echarts4 实现散点图（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
随机推荐
- 设计模式-单例模式code
package singeton; import java.security.SecureRandom; /** * @author Zero * @since 2019-08-13. * Descr ...
- [Windows] 智慧职教刷课软件（职教雨滴1.9更新完成）
(智慧职教刷课软件-职教雨滴)支持职教云(云课堂)的课程 2019年10月17日 16:19:57 增加支持资料库,MOOC 点击链接加入群聊[职教雨滴反馈群]:https://jq.qq.com/? ...
- MPV源码探究：源码结构和调用层次
源码结构和调用层次 源码结构 从 Github 上拉取最新的源码,目录结构大致如下: H:\MPV ├─.github ├─audio │ ├─decode │ ├─filter │ └─out ├─ ...
- Vue之判断对象是否为空的方法
1. JSON.stringify(xxx)=='{}' 2. Object.keys(xxx).length==0 验证结果如下:
- Python - 文件分发小程序
一.概述 该小程序实现从源端到目标端的文件一键拷贝,源端和目标段都在一台电脑上面,只是目录不同而已 二.参数文件说明 1. settings.txt的说明 a. 通过配置settings.txt,填源 ...
- .netcore3.0 System.Text.Json 日期格式化
.netcore3.0 的json格式化不再默认使用Newtonsoft.Json,而是使用自带的System.Text.Json来处理. 理由是System.Text.Json 依赖更少,效率更高. ...
- Fiddler抓取内容自动保存本地
Fiddler抓取内容自动保存本地 一.点击FidderScript 二.选择你想要的获得内容的方法 OnBeforeRequest:发送请求后 OnBeforeResponse:获得响应 三.修改j ...
- Python 3.7的安装过程
百度云Pyhton3.7-32位安装包: 链接:https://pan.baidu.com/s/1P5Egkl2KNt_DjhiFaDzqsg提取码:5171 百度云Pyhton3.7-64位安装包: ...
- Parallel.ForEach 使用多线遍历循环
Parallel.ForEach相对于foreach是多线程,并行操作;foreach是单线程品德操作. static void Main(string[] args) { Console.Write ...
- C lang:programe flow
C language flow Xx_a Introduction C language flow,control program order. Xx_b Foundation satement:fo ...