リーフレット-WebPACKのスターターシリーズ（ソースコードのダウンロードと）二つの異なるオンラインマップロードスイッチ表示

序文

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

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

一目でわかります

別のオンラインマップが表示切り替えロードリーフレット
ソースコードのデモをダウンロードします

Benpianデモロードオンラインマップが原因ではなく、特殊な負荷BaiduのマップにOSMマップ、ArcGISのマップ、世界地図、高い道徳的なマップは、GoogleマップとBaiduのマップ、ある、それはから必要な他のオンライン地図、と矛盾して使用する定義システム・スキームを投影座標定義L.Proj.CRSは、従って、テストを簡単にするために、マップに別のページに百度マップを読み込みます。
次のような効果があります
Baiduのマップエフェクト：

他のオンライン地図効果：

アイデアの実現

• ：リーフレットtileLayer層クラスに使用されるコア、具体的にはタイルのロードデータ層、制御Control.Layers切り替えリーフレットベース・マップがある、TileLayerクラスの特定の使用は、APIを参照して説明することができる
  tileLayer
• オンライン地図の設定情報

コンフィグ=定数{
 / * ----------------------------------マップ構成部------- ------------------------------ * /
mapInitParams：{
センター：[ 23.1441、113.3693 ]、
ズーム： 13
}、
ベースマップ：[
{
ラベル：「OSMストリートマップ」、
URL： "https：//に{S} .tile.openstreetmap.org / {Z} / {X} / {Y} .PNG"
}、
{
ラベル：「ArcGISのイメージマップ」、
URL：
"https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
}、
{
ラベル：「ArcGISのストリートマップ」、
URL：
"http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
}、
{
ラベル：「世界地図ストリートマップ」、
URL：
"HTTP：// T {S} .tianditu.gov.cn / DataServerをT = vec_w＆X = {X}＆Y = {Y}＆L = {Z}＆TK = 7786923a385369346d56b966bb6ad62f"
}、
{
ラベル：「世界地図のイメージマップ」、
URL：
"HTTP：// T {S} .tianditu.gov.cn / DataServerをT = img_w＆X = {X}＆Y = {Y}＆L = {Z}＆TK = 7786923a385369346d56b966bb6ad62f"
}、
{
ラベル：「Googleのストリートマップ」、
URL：
"http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
}、
{
ラベル：「Googleのイメージマップ」、
URL：
"http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
}、
{
ラベル：「高地ドイツ語ストリートマップ」、
URL：
"HTTP：// webrd0 {S} .is.autonavi.com / appmaptileのlang = ZH_CN＆サイズ= 1＆スケール= 1＆スタイル= 8＆X = {X}＆Y = {Y}＆Z = {Z}"
}、
{
ラベル：「高ドイツの地図画像」、
URL：
"HTTP：// webst0 {S} .is.autonavi.com / appmaptileスタイル= 6およびX = {X}＆Y = {Y}＆Z = {Z}"
}、
{
ラベル：「Baiduのストリートマップ」、
URL：
"HTTP：//オンライン{S} .map.bdimg.com / onlinelabel / QT =タイル＆X = {X}＆Y = {Y}＆Z = {Z}＆スタイル= {スタイル}＆スケーラ= 1＆P = 1"
}、
{
ラベル：「Baiduのイメージマップ」、
URL：
"HTTP：// shangetu {S} .map.bdimg.com / IT / U = X = {X}、Y = {Y}; Z = {Z}、V = 009; TYPE = SATE＆FM = 46"
}
]
}。
 
輸出のデフォルト設定。

• 完全なコードをロードBaiduの地図：

「リーフレット」からインポートL ;
インポート 'リーフレット/ DIST / leaflet.css' ;
インポート 'leaflet.chinaProvider' ;
以下からのインポート設定「./config」。
/ * このコードは正しくリーフレットCSSで画像をロードするために必要とされる* / 
削除L.Icon.Default.prototype._getIconUrlを。
L.Icon.Default.mergeOptions（{
iconRetinaUrl：必要（ 'リーフレット/ DIST /画像/マーカーアイコン-2x.png' ）、
iconUrl：必要（ 'リーフレット/ DIST /画像/マーカー-icon.pngの' ）、
shadowUrl：必要（ 'リーフレット/ DIST /画像/マーカーshadow.png' ）、
}）;
 
// してください導入proj4.jsとproj4leaflet.js 
L.CRS.Baidu = 新新L.Proj.CRS（
 'EPSG：900913' 、
` +メニュープロジェクト= 傭兵
 + A = 6378206
+ B = 6356584.314245179
+ lat_ts = 0.0
+ lon_0 = 0.0
+ X_0 = 0
+ Y_0 = 0
+ K = 1.0
+単位= M
 + nadgrids = @ ヌル 
+ WKTEXT
 + no_defs`、{
解像度：関数（）{
 VARの RESの= []、
レベル = 19 。
RES [ 0] = Math.pow（2、18 ）。
ため（VAR i = 1; iはレベル<; iは++ ）{
RES [I] = Math.pow（2、（18 - i））を
}
リターンのres;
}（）、
原産地：[ 0、0 ]、
境界：L.bounds（[ 20037508.342789244、0]、[0、20037508.342789244 ]）
}）;
 
CONST地図 = L.map（ "マップ" 、{
CRS：L.CRS.Baidu、// 使用チャンネルbaidu L.CRS.EPSG3857場合 
attributionControl：偽
}）setviewコマンド（config.mapInitParams.center、config.mapInitParams.zoom）。
......

完全なデモソース小さなコラムテールを参照してください：GISハウスは、小さなコラムをリーフレット

あなたが波に集中することができ、この列に興味の記事テールソースコードのダウンロード、