OpenLayers 3: ¿Cómo actualizar el mapa después de cambiar el estilo de una Característica?

9

Tengo un mapa OpenLayers 3.2.0 que presenta algunas fuentes vectoriales ( ol.source.Vector) y capas vectoriales asociadas ( ol.layer.Vector)

Cuando ol.Featurese agregan características ( ) a las fuentes de vector, se les otorga una datapropiedad que se establece en el objeto de JavaScript que representa la característica. TypeScript sigue ...

vectorSource.addFeature(new ol.Feature({
    geometry: /* ... */,
    data: vectorData,
}));

Las capas vectoriales tienen una función de estilo que lee la datapropiedad y recupera su estilo:

vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    renderBuffer: /* ... */,
    style: function (feature: ol.Feature, resolution: any) {
        var data = </* TypeScript Type */>feature.get('data');
        if ((data) && (data.style)) {
            return [data.style];
        }
        else {
            /* return default style */
        }
    }
});

A veces, los eventos no relacionados con el mapa hacen que los estilos cambien. Por ejemplo, cuando un objeto deja de ser válido, su estilo cambia. Claramente, dado que data.styleestá completamente bajo mi control, cambiarlo es trivial.

El problema es que el mapa no sabe que el estilo ha cambiado. Si cambio el estilo de un objeto y luego hago zoom en el mapa, forzándolo a volver a dibujar, noto que mis funciones de estilo se ejecutan y devuelven el nuevo estilo y la característica se vuelve a dibujar. ¿Cómo fuerzo programáticamente el mapa para que se actualice?

Después de algunas búsquedas y experimentos, he intentado:

Invocando render()a la ol.Mapmisma.
Llamando dispatchChangeEvent()alol.source.Vector
Llamando redraw()alol.layer.Vector

Se sugirieron, pero ninguno funcionó, lo cual no es sorprendente, ya que solo el primer método aparece en la documentación de la API de OpenLayers 3.2.0 y no está marcado como estable.

openlayers-2

— Xharlie
fuente

¿Has probado vectorlayer.refresh ({force: true}); ?

— ylka

Tengo pero, como era de esperar, eso no funciona porque ese es un método OpenLayers 2.

— Xharlie

12

Por casualidad, me topé con la respuesta: es recurrir changed()a las funciones en sí mismas después de cambiar la stylepropiedad de sus datos asociados. Ver: http://openlayers.org/en/v3.2.0/apidoc/ol.Feature.html?unstable=true#changed

Esto requiere que haga un seguimiento de los ol.Featureobjetos asociados con cada vectorDataobjeto (anteriormente, solo necesitaba encontrarlos vectorDatadesde una característica, que podría hacerse get()), pero esto no es un gran costo.

(He encontrado esto mirando setGeometryy setStyleotros métodos de ol.Featurever lo que hacen.)

— Xharlie
fuente

Aunque este enfoque funciona, solicitar changeduna cantidad razonable de características en realidad conlleva una penalización de rendimiento bastante grave (Chrome se bloqueó varias veces de esta manera). Recomiendo llamar changed()a la fuente de su capa después de que todas sus características hayan cambiado.

— Kyle

0

Pasé una semana tratando de descubrir cómo hacer que una entidad (Polígono) desaparezca del mapa después de eliminarla ( vectorSource.removeFeature(selectedFeature). Y ninguna solución funcionó. Curiosamente, el OL3 v3.15.1 actual no tiene una función básica de actualización forzada / renderización que funciona! La solución que funcionó para mí fue cambiar selectedFeatureel estilo:

        var newStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({color: 'red'}),
                stroke: new ol.style.Stroke({color: 'yellow', width: 1})
            })
        });
        selectedFeature.setStyle(newStyle)

Cualquier estilo funcionaría ya que la entidad ya se ha eliminado de la capa pero no se ha actualizado.

— Morey
fuente