0

JQuery と OpenLayers をうまく連携させようとしています。JavaScriptの初心者であるため、特定のレイヤーに関連付けられているjQueryを使用して、不透明度スライダーと可視性チェックボックスを生成するのに問題があります。

何層まで利用できるかは事前にはわかりません。この情報は、Geoserver への WMS リクエストを実行する Python スクリプトを介してロードされます。

私はPythonから来て、本当に欲しいのはレイヤーオブジェクトとキーを格納するための辞書であることがわかりました。これは、ハッシュを使用してこれを行う私の試みです。「ハッシュを使用しないでください。「 _ ___」を見てください」から「「()」を見逃した」まで、提案を探しています。

以下のコードは、レイヤーをマップに追加し、その名前をコンテンツ ウィンドウに追加し、不透明度バーと、可視性を設定するためのチェック ボックスを追加します。単一のレイヤーで素晴らしく機能します。後続の各レイヤーは、前のレイヤーの不透明度スライダーとチェック ボックスを上書きします。

//If the thumbnail is clicked load the layer.
$('table').on('click','.thumbnail',function(event){
var layer = {};

//This info is placed into the img tag via jQuery   
var name = ($(this).attr("layername_id"));
var title = ($(this).attr("titlename_id"));

//OpenLayers creates the layer here
layer[i] = new OpenLayers.Layer.WMS(title, "geoserver/wms?",{LAYERS: name,FORMAT: 'image/png',TRANSPARENT: 'true',PROJECTION:'EPSG:30100',BBOX: '-180,-60,180,60'},{OPACTIY: 0.1, isBaseLayer: false, tiled:true} );

//Do not add the same layer multiple times
if (map.getLayersByName(name) == false) {
        map.addLayers([layer[i]]);  
}

//Defined just to make life easier in this part of the code.
var name = layer[i].name;

//Check box for visibility in a table of contents DIV tag.
$('.toc').append('<div><input class="toc_inline" id="check'+i+'" type="checkbox" checked="checked"></div>');
    $("[id^=check]").click(function(){
    var $input = $(this);
    if($input.prop('checked') == true){
        layer[i].setVisibility(true);
    }
    else {
        layer[i].setVisibility(false);
    }
    });

//Layer name in the TOC and slider to handle transparency.
    $('.toc').append('<div class="toc_inline" unique_id="'+name+'">'+name+'</div>');

//Slider for transparency
$('.toc').append('<div id="slider-'+i+'"><div class="ui-slider-handle"></div></div>');

    $("[id^=slider]").slider({
    value: 100,
    slide: function(e, ui) {
        layer[i].setOpacity(ui.value / 100);
        }
    });
//My attempt to step to the next integer
i++;

});
4

0 に答える 0