Añadido algunos recompensa para que más gente eche un vistazo a mi pregunta. Gracias.
He estado tratando de utilizar la interfaz de usuario jQuery Slider para controlar la opacidad de la capa en OpenLayers, pero tengo un problema al intentar establecer el "valor de opción" a otra cosa que el "max" de valor.
Lo que me gustaría ver es el setOpacity método de cambiar mi opacidad de la capa a 20% onload. Sin embargo, el control deslizante que se muestra en la posición correcta, pero la capa que muestra el "max" valor de opacidad (100%/opaco). En la actualidad, una presentación de evento desencadena un cambio en la opacidad. Necesito la fuerza de la opacidad de mi las capas WMS a ser la de establecer manualmente "valor" opciones cuando se carga la página.
Quita cualquier código innecesario. Un control deslizante que se muestra a continuación. Aprecio mucho su ayuda!
<body onload="init()"> <script type="text/javascript"> $(document).ready(function(){ $(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> </body>
Respuestas
¿Demasiados anuncios?
Usted tiene dos opciones:
- gancho en el crear evento para ajustar la opacidad de la capa como deslizadores se crean
- ofrecer una panorámica de la cfg de la matriz, de modo que las capas están ya init ed a la misma valor como los controles deslizantes
La primera solución es simple, sólo tiene que proporcionar un crear: function(event, ui) { ... } como una opción init de la barra como la siguiente:
$( "#slider1" ).slider({
[...]
create: function(event, ui) { ... }
[...]
});
La segunda solución es aún más simple y se asegurará de que el usuario siempre ve las capas a la derecha de la opacidad. En la primera solución no es una posibilidad (aunque pequeña) de que las capas aparecen por un corto tiempo al 100% de opacidad hasta que los reguladores se creó.
Definir una matriz global como la siguiente:
var opacities=[10, 20, 20];
en el OL en el código de inicialización establecer la opacidad de la capa hora de creación:
hii_1 = new OpenLayers.Layer.MapServer("Land Cover","../../cgi-bin/mapserv.exe",{
map:'C:/ms4w/Apache/htdocs/hii/hii_landcover.map'},{
isBaseLayer:false,
transparent:true,
format:"image/png",
alpha:true
});
hii_1.setOpacity(opacities[0] / 100);
y, a continuación, hacer lo mismo a la hora de crear los controles deslizantes:
$( "#slider1" ).slider({
range: "min",
min: 0,
value: opacities[0],
slide: function(e, ui) {
hii_1.setOpacity(ui.value / 100);
$( "#amount1" ).val( ui.value );
}
});
P. S.: código de refactorización para que la capa de cfg se mueve totalmente en la opacidad de la matriz (que se debería cambiar el nombre en este momento) y la duplicación de código se reduce se deja como ejercicio para el lector.
Para completar la respuesta de unicoletti. Usted puede echar un vistazo en el taller de opengeo. Hay un ejemplo que combina openlayers y el control deslizante de JQuery UI .
El tutorial completo de OL está disponible aquí .
