Использование jQuery UI Slider для управления непрозрачностью слоя в OpenLayers

Question

Я задал свой вопрос на gis.stackexchange.com из-за его географической природы, но я подумал, что получу более широкий ответ. https://gis.stackexchange.com/q/18327/3773

Я пытался использовать jQuery UI Slider для управления непрозрачностью слоя в OpenLayers, но у меня возникла проблема при попытке установить для параметра «value» значение, отличное от «max».

Я хотел бы видеть, что метод setOpacity меняет непрозрачность моего слоя до 20% от нагрузки. Тем не менее, ползунок отображается в правильном положении, а слой отображает «макс» значение непрозрачности (100% / непрозрачный).

Мне нужно заставить веб-страницу устанавливать onpacity onload, но я не знаю, как это сделать.

Удален любой ненужный код. Ваша помощь очень ценится!

<script type="text/javascript">
    var options = {maxExtent: new OpenLayers.Bounds(-10592586.767623,5113378.756775,-8275939.536344,7731361.313701)};

    function init(){
        OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";

        map = new OpenLayers.Map("map",{
            maxExtent: new OpenLayers.Bounds(-10592586.767623,5113378.756775,-8275939.536344,7731361.313701),
            maxResolution:"auto",
            units:'m',
            controls:[
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.KeyboardDefaults(),
                new OpenLayers.Control.MousePosition(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.Navigation({dragPanOptions: {enableKinetic: true}})
                ]
            });

        hii_1 = new OpenLayers.Layer.MapServer("HII","http://127.0.0.1/cgi-bin/mapserv.exe",{
            map:'C:/ms4w/Apache/htdocs/hii/hii_landcover.map'},{
            isBaseLayer:false,
            transparent:true,
            format:"image/png",
            alpha:true
            });

        osm_mapnik = new OpenLayers.Layer.OSM("OpenStreetMap: Mapnik");

        gmap = new OpenLayers.Layer.Google("Google Maps: Streets");

        map.addLayers([hii_1,osm_mapnik,gmap]);
        map.zoomToMaxExtent();
        map.setCenter(new OpenLayers.LonLat(-9434263,6422370),5);
</script>

<script>
$(function() {
    $( "#slider1" ).slider({
    range: "min",
    min: 0,
    value: 20,
    slide: function(e, ui) {
        hii_1.setOpacity(ui.value / 100);
        $( "#amount1" ).val( ui.value );
    }
    });
    $("#amount1" ).val($( "#slider1" ).slider( "value" ) );
</script>

Answer 1

Обратный вызов ползунка не вызывается onLoad.Чтобы вызвать событие вручную, см. Запуск события ползунка пользовательского интерфейса jQuery для примера.

Хотя, было бы лучше для вашего слоя с непрозрачностью 0,20.Вы можете добиться этого, добавив непрозрачность свойства к вашим параметрам слоев.

{ isBaseLayer:false, transparent:true, format:"image/png", alpha:true, opacity:0.20 } .