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 官网在线例子 ...
随机推荐
- Linux服务器部署.Net Core笔记：六、安装MySQL
接下来我们在 Centos7 系统下使用 yum 命令安装 MySQL,需要注意的是 CentOS 7 版本中 MySQL数据库已从默认的程序列表中移除,所以在安装前我们需要先去官网下载 Yum 资源 ...
- Gradle Java 插件
Java 插件是构建 JVM 项目的基础,它为项目增加了很多能力,例如编译,测试,打包,发布等等. 很多插件都是基于 Java 插件实现的,例如 Android 插件. 用法 使用 id 应用插件 p ...
- 【30天自制操作系统】day02：寄存器和Makefile
基本寄存器 AX(accumulator):累加寄存器 CX(counter):计数寄存器 DX(data):数据寄存器 BX(base):基址寄存器 SP(stack pointer):栈指针寄存器 ...
- C语言程序运行时的一些细节
本章可以看作是 <Unix 环境高级编程>Ch7 的笔记. C 程序运行的开始和结束 一个可以运行的 C 语言总要有一个 main 函数,main 函数现在的完整定义是 int main( ...
- 【SVN搭建】搭建SVN服务
1.安装 # yum -y install subversion 2.配置 创建仓库 我们这里在/opt下建立一个名为svn的仓库(repository),所有代码都可以放在这个下面,创建成功后在sv ...
- jQuery基础之事件处理
jQuery基础之事件处理方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> < ...
- SpringCloud找不到@HystrixCommand标签
版本声明: SpringCloud:Greenwich.SR4 SpringBoot:2.1.9.RELEASE 解决方案: 添加坐标 <dependency> <groupId&g ...
- K8S 1.16 [plugin flannel does not support config version
[plugin flannel does not support config version 导致 Unable to update cni config: no valid networks fo ...
- http请求报400错误的原因分析
在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里: 原因:1)前端提交数据的字段名称或者是字段类型 ...
- Flask 模板语言，装饰器
Jinja2模板语言 # -*- coding: utf-8 -*- from flask import Flask, render_template, request, redirect, ...