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++;
});