使用jQuery UI滑塊來控制OpenLayers中的圖層不透明度

由於它的地理本質，我在gis.stackexchange.com上提出了我的問題，但我想我會在這裏得到更大的響應。 https://gis.stackexchange.com/q/18327/3773 使用jQuery UI滑塊來控制OpenLayers中的圖層不透明度

我一直在嘗試利用jQuery UI Slider來控制OpenLayers中的圖層不透明度，但是當嘗試將「值」選項設置爲「最大」值以外的任何值時，我遇到了問題。

我想看到的是setOpacity方法將我的圖層的不透明度更改爲20％onload。但是，滑塊顯示在正確的位置，但圖層顯示不透明度（100％/不透明）的「最大」值。

我需要強制網頁setOpacity 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>

來源

2011-12-31 Michael Markieta

在這裏找到答案： http://gis.stackexchange.com/questions/18327/using-the-jquery-ui-slider-to-control-layer-opacity-in-openlayers – 2012-01-05 04:02:37

不調用滑塊的回調函數onLoad。要手動觸發事件，請參閱Trigger a jQuery UI slider event的示例。

儘管如此，對於不透明度爲0.20的圖層來說，效果會更好。您可以通過將屬性不透明添加到圖層選項來實現此目的。

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

來源

2012-01-04 10:04:58 Niels

使用jQuery UI滑塊來控制OpenLayers中的圖層不透明度

回答

相關問題