Dd1bf539f0cf86a6e30b93dfae22540d
leaflet-webpack 入门开发系列五地图卷帘(附源码下载)

前言

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

内容概览

leaflet 地图卷帘
源代码 demo 下载

效果图如下:

demo 实现的效果比较简单,直接就是用 leaflet 官方的地图卷帘插件 github:leaflet-side-by-side,这个插件用的时候,左右两侧的底图要是同个的话,只能显示一个,不知道这个算不算一个bug

demo 集成插件的步骤如下:

  • npm 命令安装 leaflet-side-by-side 插件库
npm i leaflet-side-by-side --save
  • 引用 leaflet-side-by-side 进来
import "leaflet-side-by-side";
  • 完整核心代码如下:
    ```
    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];

top Created with Sketch.