Question

我在gis.stackexchange.com上问了我的问题，因为它的地理性质，但我想我会在这里有更大的回应。 https://gis.stackexchange.com/q/18327/3773

我一直在尝试利用jQuery UI Slider控制OpenLayers中的图层不透明度，但在尝试将“value”选项设置为“max”值以外的任何值时，我遇到了问题。

我希望看到的是setOpacity方法将我的图层的不透明度更改为20％onload。但是，滑块显示在正确的位置，但图层显示不透明度的“最大”值（100％/不透明）。

我需要强制网页设置onOpacity，但我不熟悉如何执行此操作。

删除了任何不必要的代码。非常感谢您的帮助！

<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。要手动触发事件，请参阅Trigger a jQuery UI slider event以获取示例。

尽管如此，对于不透明度为0.20的图层会更好。您可以通过向图层选项添加属性不透明度来实现此目的。

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

使用jQuery UI Slider控制OpenLayers中的图层不透明度

1 个答案: