example - cómo ocultar las características vectoriales en openlayers
openlayers v5 (7)
Solución
Cambie la propiedad de style para las instancias de OpenLayers.Feature.Vector . Establezca el atributo de display en none o el atributo de visibility en hidden . Redibuje la capa después.
De acuerdo a los comentarios en el código de OpenLayers :
pantalla : {String} Los simbolizadores no tendrán efecto si la pantalla está configurada en "ninguno". Todos los demás valores no tienen efecto.
Código de ejemplo
Para una variable de capa de OpenLayers dada llamada layer , puede ocultar todas las características de la siguiente manera:
var features = layer.features;
for( var i = 0; i < features.length; i++ ) {
features[i].style = { visibility: ''hidden'' };
}
layer.redraw();
Esto se repite en todas las funciones de una capa, lo que permite el control total de las funciones específicas para ocultar.
He escrito algún código para ocultar marcadores específicos en nuestros mapas basados en casillas de verificación fuera del propio mapa. Sin embargo, estos marcadores también tienen características vectoriales (realmente en capas separadas) pero quiero ocultar las características en lugar de destruirlas. Intenté usar display (false) pero obtengo errores. ¿Existe una función para ocultar vectores?
Esto es lo que finalmente hice para este asunto, ya que tenía la misma necesidad pero no quería ocultar cada función individualmente ni jugar con el estilo CSS:
Asumiré que tienes algo como lo siguiente en algún lugar:
myVector = new OpenLayers.Layer.Vector(...
Luego vincule este código al botón o al evento que necesite:
if( myVector.getVisibility() && myVector.features.length > 0 ) {
myVector.setVisibility(false);
} else {
myVector.setVisibility(true);
}
Las referencias getVisibility () / setVisibility () faltan en la parte vectorial pero están en la documentación de capa.
He luchado con OpenLayers varias veces tratando de que mis funciones dentro de la misma capa se muestren exactamente como quiero. La solución de @ igorti anula todas las propiedades de estilo de la función, por lo que no recomiendo este enfoque a menos que no tenga ninguna razón para volver a mostrar la función más adelante (en cuyo caso el método removeFeatures() es probablemente una mejor manera de hacerlo de todos modos) ).
Ocultar las características del vector
La forma en que lo hago es configurar manualmente el estilo de visualización de la entidad en none y luego volver a dibujar la capa. Si necesito mostrar la función nuevamente, establezca la propiedad de visualización en block . Bastante simple:
function hideFeatures() {
var features = layer.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
if (!isVisible(feature)) {
feature.style.display = ''none'';
}
}
layer.redraw();
}
Re-visualización de las características del vector
Re-mostrar características ocultas es un poco más complicado dependiendo de su situación. Echa un vistazo a la documentación de OpenLayers sobre el estilo para algunas posibilidades. Pero en general, si necesito mostrar la característica nuevamente, establezco el atributo de estilo de la característica en null . Esto asegura que cuando el renderizador de OpenLayers realice la función drawFeature , sus estilos preconfigurados desde el mapa de estilo de su capa se vuelvan a dibujar:
// from OpenLayers drawFeature()
if (!style) {
style = this.styleMap.createSymbolizer(feature, renderIntent);
}
Por lo tanto, su función de visualización podría ser algo como esto:
function displayFeatures() {
var features = layer.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
if (isVisible(feature)) {
feature.style = null; //redraw the feature
}
}
layer.redraw();
}
Otros enfoques
Hay un par de otros enfoques para hacer esto. Puede establecer la característica fillOpacity y strokeOpacity en 0, de esta manera:
function displayFeatures() {
var features = layer.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
if (isVisible(feature)) {
feature.style.fillOpacity = 1;
feature.style.strokeOpacity = 1;
}
else {
feature.style.fillOpacity = 0;
feature.style.strokeOpacity = 0;
}
}
layer.redraw();
}
La desventaja de este enfoque es que cualquier control de mapa activo aún podrá interactuar con la función "oculta", por lo que si un usuario hace clic o se desplaza accidentalmente sobre la función, estos eventos aún se activarán.
También puede crear un estilo dentro del mapa de estilo de su capa llamado oculto, con cualquiera de los dos enfoques anteriores. Luego, para ocultar una característica, simplemente cambie el valor de la entidad en hidden .
Finalmente, puede agregar subconjuntos de sus características a capas separadas y llamar falso al método setVisibility la capa. Esta es solo una buena opción si no tiene la necesidad de interactuar con todas las funciones simultáneamente, ya que solo estarán activos los controles para la capa superior de su mapa. (Hay formas de usar los controles para múltiples capas , pero hay muchos más malabares involucrados y no lo recomiendo a menos que sea absolutamente necesario)
No quedó claro en tu pregunta si ya lo has probado, pero si no lo has hecho, puedes probar el método setVisibility ().
Para ocultar características
for( var i = 0; i < features.length; i++ ) {
features[i].style = { display: ''none'' };
}
layer.redraw();
Para mostrar de nuevo las características ocultas
for( var i = 0; i < features.length; i++ ) {
features[i].style = null;
}
layer.redraw();
Para ocultar una característica
var feature = vectorlayer.getFeatureByFid(fid);
feature.style = { display: ''none'' };
vectorLayer.removeFeatures(feature);
vectorLayer.addFeatures(feature);
Puede configurar la visualización: ''ninguno'' en la propiedad de estilo. Para que no se muestren las características.