（ソースコードのダウンロードと）リーフレット - WebPACKのスターターシリーズ5つの地図シャッター

序文

理解するための環境知識のリーフレット - WebPACKのスターターシリーズ：

• ノードのインストールパッケージのダウンロード
  のWebPACKのパッケージ管理ツールは、公式サイトのダウンロードがあるノードの環境を依存する必要があり、そのノードのインストールパッケージは、リンクの上にインストールする必要があります
• WebPACKの設定文書では説明
  のWebPACKの文書の構成は、参照するには初心者のために、私も見て学んだ説明を詳細に
  
• vscodeは、インストールパッケージをダウンロードし、私はvscodeコンパイラフロントエンド開発ツールのプロジェクトにここにいる、このツールは個人的にかなり良い感じ
• リーフレットのAPIドキュメントは、説明した詳細リーフレットに、各クラスの機能および特性、等
• 例としては、オンラインリーフレット
• リーフレットを差し込み、リーフレットプラグインライブラリ、非常に便利

一目でわかります

リーフレットマップシャッター
ソースコードのデモのダウンロード

次のような効果があります

効果は比較的単純で、直接使用githubのリーフレットのデモが公式マップシャッタープラグです：リーフレットサイド・バイ・サイドケースとベースマップの左右両側場合、唯一のショー、プラグインの時間ではなく、これは既知のバグとしてカウントしません

次のステップのデモ統合プラグ：

• リーフレット・サイド・バイ・サイドのプラグインライブラリをインストールするには、NPMコマンド

NPM私はリーフレット・サイド・バイ・サイド--save

• 参考リーフレット・サイド・バイ・サイドに来て

輸入「リーフレット・サイド・バイ・サイド」。

• コアコードを完了し、次のとおりです。

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

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