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

时间 2019-11-13

标签 leaflet webpack 入门开发系列地图分屏对比源码下载繁體版

原文原文链接

前言

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

node 安装包下载
webpack 打包管理工具须要依赖 node 环境，因此 node 安装包必须安装，上面连接是官网下载地址

webpack 配置介绍文档
详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学

vscode 安装包下载，我这边用 vscode工具编译开发前端项目，我的觉的这款工具还不错

leaflet api文档介绍，详细介绍 leaflet 每一个类的函数以及属性等等

leaflet 在线例子

leaflet 插件，leaflet 的插件库，很是有用

内容概览

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

效果图node

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

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小专栏web

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