====== 🌏Leaflet 地図タイル切り替え(改) ====== Leafletの標準的なタイルレイヤーコントロール(L.control.layers)([[layers|関連記事]])ではズームによってタイルサーバーや著作権表を切り替える事ができないようなので、ズームによってタイルサーバーや著作権表を切り替える機能を(無理矢理)追加してみました。これによって高倍率時にマップタイル無い場合に代替のマップタイルを表示したり、国土地理院の写真などでズーム別に著作権表記を書き換える必要がある場合などに利用できます。注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== 地図右上のタイルコントロールから「デモ」または「デモ写真」を選びズーム変更するとズームによって地図が切り替わります。タイルの「デモ」を選ぶとズームによって地図タイルが白地図・カラー地形図・モノクロ地形図に切り替わります。「デモ写真」を選ぶとズームによってタイルサーバーと著作権表示が切り替わります。

===== ソースコード ===== 主にコメント行のある部分が[[map]]から追加された部分です（削除された部分は書いてありません） html部分

JavaScript部分

===== 説明 ===== 処理の概要は、通常のタイルコントロールによる地図表示は透過度ゼロで見えない状態にし、代わりに選択したタイル名とズームから表示したいマップを重ね表示しているだけです。主な処理内容と使用するマップタイルごとの変更箇所は下記のようになります。 **(1)保持変数** タイルの表示状態を自己管理するための変数です。タイル名を取得する方法がわからないので、最初に表示するタイル名は ''tileSelectName'' に手動登録します。


var tileSelectName='タイル名2';

**(2)タイルチェンジ用** タイル変更で使用するタイルサーバーや著作権情報などを登録します。（番号は通し番号でなくても良い）


tileList[番号]=L.tileLayer('タイルアドレス', { attribution: '著作権表示'});

** (3)タイルメニューを登録 ** 地図タイルズームで切り替えない項目は通常と同じように登録します。([[layers|関連記事]]) 地図タイルを切り替える項目は透過度を0(opacity:0)にして著作権表示(attribution)は未登録にして下さい。著作権表示は上記2番の上書きする側の登録を利用します。またタイルの名前で切り替えるので名称は他と重複しないようにして下さい。デモでは透過度を0にして見えない状態にしているので通常の地図タイルで登録せず1x1ピクセルの小さいpngファイル読み込ませて通信が極力発生しないようにしています。 (1)の''tileSelectName''で指定したタイルにはaddTo()を付けて下さい。 minZoom,maxZoom を指定するとズームを制限できます。


L.control.layers({
  'タイル名1':L.tileLayer('タイルアドレス1', { attribution: '著作権表示1'         }),
  'タイル名2':L.tileLayer('タイルアドレス2', { opacity:0                          }).addTo(マップ名),
  'タイル名3':L.tileLayer('タイルアドレス3', { minZoom:数値,maxZoom:数値,opacity:0}),
  'タイル名4':L.tileLayer('タイルアドレス4', { attribution: '著作権表示4'         })
}).addTo(マップ名);

** (4)初回処理 ** 初回のタイル変更用です。 ** (5)タイル変更イベント ** レイヤーコントロールでタイルを変更した時に発生するイベントです。選択したタイル名を取得して(7)レイヤー変更関数をを呼び出す。 ** (6)ズーム変更イベント ** ズームが変更した時に発生するイベント。(7)レイヤー変更関数を呼び出す ** (7)レイヤー変更関数 ** レイヤーコントロールで選択したタイル名とズームから実際に表示したいタイルを追加表示します。既に別のタイルが表示されている場合は先にそのタイルを削除します。下記の部分の ''id='' に2番で登録した ''tileList[番号]'' の番号を割り当ててると地図を変更します。「デモ写真」のように範囲指定でidを割り当てても良いし、「デモ」のように各ズーム単位でidをセットしてもよいです。


  if(tileSelectName==='デモ'){
    if      (zoom===5) { id=0;
    }else if(zoom===6) { id=0;
    }else if(zoom===7) { id=1;
    }else if(zoom===8) { id=1;
    }else if(zoom===9) { id=2;
    }else if(zoom===10){ id=2;
    }
  }else if(tileSelectName==='デモ写真'){
    if(zoom<=1)       { id=3; //Zoom0～1の時
    }else if(zoom<=8) { id=4; //Zoom2～8の時
    }else if(zoom<=13){ id=5; //Zoom9～13の時
    }else             { id=6; //Zoom14～18の時
    }
  }