地理院地図（電子国土Web）に色別標高図をオーバーレイして透過率調整を加える方法

　２２日の日記の続きです。地理院地図（電子国土Web）の地図選択画面に色別標高図のオーバーレイを追加し、さらに透過率調整のスライダーを加えてみました。

主な追加点

　cahngeMap2 では色別標高図のデータをもらってきて、オーバーレイヤーを作成し、透過率の設定に応じて色別標高図の透過率を設定しています。opachange はスライダーを動かすと呼ばれ、色別標高図の透過率を変更して表示数値も変更しています。

var layer_relief;
function changeMap2(mapid,checked){
    if(checked === true) {
        var data = libraryMapData[1];
        var layers = [];
        mapHandler.addMapLayer(data,layers);
        layer_relief = layers["relief"];
        layer_relief.setOpacity(opavalue/100);
        setTimeout('layer_relief.redraw(true);', 3000);
    }else{
        map.removeLayer(layer_relief);
    }

}

function opachange(value){
    opavalue = value;
    document.getElementById("slider2-value").textContent = "透過率調節: "+opavalue;
    if (layer_relief){
        layer_relief.setOpacity(opavalue/100);
    }
}

主な追加点の修正（14/01/19 追記）

　国土地理院は libraryMapData[] を書き換えることが判明しました。対策として色別標高図の定義オブジェクトを直接記述する仕様に変更しました。

var layer_relief;
function changeMap2(mapid,checked){
    if(checked === true) {
//        var data = libraryMapData[2];
        var data = {
          dataset : "dataSet_Relief",
          icon : false,
          key : "relief",
          legendFunc : "getLibraryLegend_relief",
          title : "色別標高図",
          type : "map",
          zindex : 215
        };
        var layers = [];
        mapHandler.addMapLayer(data,layers);
        layer_relief = layers["relief"];
        layer_relief.setOpacity(opavalue/100);
        setTimeout('layer_relief.redraw(true);', 3000);
    }else{
        map.removeLayer(layer_relief);
    }

}

サンプル

　詳細はサンプルページのソースを見てください。「// ヤマレコ用」とコメントが付いている付近を追えば大体分かると思います。

　淡色地図に色別標高図をオーバーレイしたところです

　Googleの地形図に色別標高図をオーバーレイしたものです。いつものGoogleマップに色気が出ていますね