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 官网在线例子 ...
随机推荐
- 3. abp依赖注入的分析.md
abp依赖注入的原理剖析 请先移步参考 [Abp vNext 源码分析] - 3. 依赖注入与拦截器 本文此篇文章的补充和完善. abp的依赖注入最后是通过IConventionalRegister接 ...
- 深度学习优质学习项目大放送！-AI Studio精选开源项目合集推荐
近期 在AI Studio上发现了不少优质的开源深度学习项目,从深度学习入门到进阶,涵盖了CV.NLP.生成对抗网络.强化学习多个研究方向,还有最新的动态图,都以NoteBook的方式直接开源出来,并 ...
- What to wear today需求分析文档
成员: 身份 姓名 分工 组长 陶清然 负责文档编写.ppt,测试 组员 张娜 负责前端 组员 代丽芳 负责后台 组员 江雪 负责数据库 组员 伊穆兰 负责后台 小组成员在本次迭代中的贡献: 姓名 贡 ...
- Linux CentOS 7 搭建 Tomcat 8 服务器
Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说,可以这样 ...
- AoE 搭档 TensorFlow Lite ，让终端侧 AI 开发变得更加简单。
AoE( AI on Edge , https://github.com/didi/AoE ) 是滴滴近期开源的终端侧 AI 集成运行时环境 ( IRE ). 随着人工智能技术快速发展,近几年涌现出了 ...
- SSM + VUE 实现简单的 CRUD
一.项目分析 1.需求 (1)使用 ssm + vue 实现一个crud(数据库增删改查)的简单实现.(2)前后端分离,前端页面展示+后台管理. 2.技术点 (1)基础框架: SSM(Spring,S ...
- NETGEAR R7800路由器TFTP刷回原厂固件方法
前几天因图新鲜将用了一年的R7800刷为dd-wrt固件,结果发现信号覆盖和网络速率相对于原厂固件还有一些差距. 然后从dd-wrt固件刷回原厂,具体操作过程如下: 1.到NETGEAR官网[支持]模 ...
- library: Vulnhub Walkthrough
网络主机探测: 端口主机扫描: ╰─ nmap -p1-65535 -sV -A -O -sT 10.10.202.136 21/tcp open ftp vsftpd 3.0.380/tcp ope ...
- TP事物的写法
Db::startTrans(); try{ Db::commit(); } catch (\Exception $e) { Db::rollback(); } use think\Db; publi ...
- mongo shell 通过返回信息定位错误点
有时候我们会通过mongo shell 运行一些脚本,去执行更新或运维需求.mongo shell 可执行的代码可以实现比较复杂的功能,代码也可以比较丰富.当执行报错时,如果可以快速定位到错误点,对解 ...