OpenLayers lona renderer - vuelve a dibujar todas las características en la selección de una sola característica

Question

Actualmente estoy tratando de aprender más acerca de OpenLayers, y me voy contra de rendimiento o comportamiento de las cuestiones que yo no esperaría a ver. Para elaborar...

He combinado este ejemplo para generar un montón de puntos aleatorios con este ejemplo en resaltando / cambiar los iconos de funciones en la selección.

El resultado está disponible en este JSFiddle.

La (muy básico) de la aplicación prioriza el Lienzo representador, de modo que los puntos de la capa está definida de la siguiente forma:

var layer = new OpenLayers.Layer.Vector('points', {renderers: ['Canvas', 'SVG', 'VML'],
styleMap: new OpenLayers.StyleMap({
    "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
        externalGraphic: "img/marker-green.png",
        graphicOpacity: 1,
        rotation: 0,
        pointRadius: 10
    }, OpenLayers.Feature.Vector.style["default"])),
    "select": new OpenLayers.Style({
        externalGraphic: "img/marker-blue.png"
    })
})});

El Lienzo renderer es bueno porque el zoom y el encuadre funciona bien con miles de puntos (a diferencia de SVG) pero al hacer clic / la selección de características es mucho más lento que el formato SVG. Me sorprendió ver que cuentan con todos los iconos se vuelve a dibujar antes de la función seleccionada del icono de cambios (marcador azul.png). Esto es especialmente evidente en Firefox, pero es menos notable en Chrome y demasiado rápido para verlo en IE9.

Esta cuestión, por LO que sugiere que podría haber un problema con la forma en OpenLayers es la interacción con el Lienzo, pero por desgracia no sé lo suficiente acerca de HTML5 o OpenLayers (todavía) para estar seguro.

¿Alguien tiene experiencia con OpenLayers / Lienzo representador? Estoy interesado en alguna manera de acelerar la selección de características cuando hay un montón de características - si es que el tiempo necesario para averiguar qué función seleccionada o simplemente cambiar la función seleccionada icono de la misma.

Cualquier ayuda la agradezco mucho.

Answer 1

OpenLayers no tiene conocimiento de qué características podría tener interacciones con otras características en volver a dibujar. Como resultado, cuando se selecciona una función, es muy probable que OpenLayers vuelve a dibujar todas las características. (Por ejemplo, si tiene varias características apiladas, y volvió a dibujar sólo uno de ellos, usted podría conseguir a extraños efectos secundarios en los que el dibujo no es el mismo que se obtendría con una completa actualización.)

Es posible que esto ha mejorado desde que he ayudado a trabajar en el código originalmente, ya sé que se han realizado algunos trabajos en este sentido, pero este comportamiento no me sorprende.

Answer 2

Puedo confirmar que OL Lienzo representador regenera la capa entera incluso cuando una sola función debe ser redibujada. El punto exacto de las fuentes en las que se implementa es este uno en drawFeature.

Esto tiene probablemente que ver con el hecho de que el lienzo es simplemente un mapa de bits para volver a dibujar en la parte superior de la misma puede producir artefactos si la nueva imagen no está perfectamente colocado en la parte superior de la antigua (esto podría ocurrir debido al redondeo de las cifras y de suavizado, pero esto se me acaba la especulación).

Soluciones:

1. El uso de SVG renderizador que no presenta la actualización de comportamiento en función de la selección
2. O agregar otra capa de Vector en la parte superior sólo para el propósito de resaltar las características. Gancho en el SelectFeature control onSelect evento, por lo que la función seleccionada se agrega a este punto culminante de la capa de

@tomfumb , como por su amable solicitud aquí está el fragmento de código:

var selectControl = new OpenLayers.Control.SelectFeature(
  layer, {
     clickout: true, multiple: false, hover: false, box: false,
     onBeforeSelect: function(feat) {
        // add code to add feature to highlight layer
        return false;
     },
     onUnselect: function(feat) {
        // add code to remove feature from highlight layer
     }
  }
);