Foreword
leaflet-webpack Starter series of environmental knowledge to understand:
- node installation package download
webpack package management tools need to rely node environment, so node installation package must be installed above link is the official website Download- webpack configuration document describes
in detail the configuration of webpack document describes, for beginners to see, I also watched and learned- vscode download the installation package , I am here with vscode compiler front-end development tools project, this tool personally feel pretty good
- leaflet api document describes , in detail leaflet each class functions and properties, etc.
- Examples leaflet online
- Plug leaflet , leaflet plug-in library, very useful
At a Glance
leaflet map shutter
source code demo download
The effect is as follows:
effects demo of relatively simple, direct use github leaflet is the official map shutter Plug: leaflet-Side-by-Side , the plug-in with time, if the left and right sides of the base map with a case, only a show, not Does this count as a know bug
Step demo integrated plug of the following:
- npm command to install the leaflet-side-by-side plug-in library
npm i leaflet-side-by-side --save
- Reference leaflet-side-by-side to come
import "leaflet-side-by-side";
- Complete the core code is as follows:
import L from 'leaflet'; import 'leaflet/dist/leaflet.css'; import "leaflet-side-by-side"; import config from "./config"; let userconfig = {}; //左侧地图 const map = L.map("Map", { attributionControl: false }).setView(config.mapInitParams.center, config.mapInitParams.zoom); //创建底图切换数据源 const baseLayer1 = L.tileLayer(config.baseMaps[0].Url,);//OSM街道图 const baseLayer2 = L.tileLayer(config.baseMaps[1].Url);//ArcGIS影像图 map.addLayer(baseLayer1);//左侧默认卷帘图层 map.addLayer(baseLayer2);//右侧默认卷帘图层 userconfig.leftLayers = [baseLayer1]; userconfig.rightLayers = [baseLayer2]; //卷帘地图效果 userconfig.sideBySide = L.control .sideBySide(userconfig.leftLayers, userconfig.rightLayers) .addTo(map); //左侧下拉框改变事件 document.getElementById("selectLeftV").onchange =function(){ sideBySideChange(); } //右侧下拉框改变事件 document.getElementById("selectRightV").onchange =function(){ sideBySideChange(); } function sideBySideChange(){ //这个插件的左右两侧底图不能一样,否则同时只能显示一个,算是一个bug? var leftvalue = document.getElementById("selectLeftV").value; var rightvalue = document.getElementById("selectRightV").value; var LeftLayer = leftvalue === "0" ? baseLayer1 : baseLayer2; var RightLayer = rightvalue === "0" ? baseLayer2 : baseLayer1; addLRLayers(LeftLayer,RightLayer); userconfig.sideBySide.setLeftLayers(userconfig.leftLayers); userconfig.sideBySide.setRightLayers(userconfig.rightLayers); } ……
完整demo源码见小专栏文章尾部:GIS之家leaflet小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波