¿Equivalente de layer.redraw (verdadero) en OpenLayers 3?


13

Tengo una capa geojson en mi aplicación OL3 que quiero volver a dibujar cada 5 segundos (para mostrar el movimiento en el mapa).

Cómo lo hago ? No se pudo encontrar el equivalente de Layer.redraw ().


¿Has mirado en ol.animation? En general, el dibujo vectorial es más suave y se maneja de manera diferente en ol3, pero de su pregunta no queda del todo claro lo que desea hacer.
John Powell

@ JohnBarça: mis datos de GeoJson provienen de postgres que se actualizan cada 5 segundos con nuevos datos de GPS. Quiero volver a dibujar la capa para mostrar cada vez que la posición actual de las unidades en el mapa (sigue cambiando ...)
Alophind

Entonces, ¿está solicitando datos cada 5 segundos utilizando una llamada recursiva setTimeout (o algo similar) y solo desea saber cómo forzar la actualización de las características del vector?
John Powell

@ JohnBarça: si hay una mejor manera en que estoy dispuesto a aprender, pero esto es lo que hago, quiero mostrar la ubicación del GPS en tiempo real en el mapa. El GPS envía su ubicación a PostGIS y desde allí leo los datos usando GeoJSON (o puedo usar GeoServer) pero deseo que la capa se actualice de vez en cuando.
Alophind

Claro, entiendo lo que estás tratando de hacer. Cualquier posibilidad de una muestra de código, porque en mi experiencia, si coloca un bucle de animación en settimeout, con una llamada ajax a un servidor remoto, y carga el json que regresa usando Format.GeoJSON o similar, las características se actualizarán.
John Powell

Respuestas:


9

Así es como puede actualizar una fuente de vectores cada 5 segundos, desde un servicio web que devuelve características en un documento GeoJSON:

var vectorSource = new ol.source.Vector();
var geojsonFormat = new ol.format.GeoJSON();

window.setTimeout(function() {
  $.ajax('http://example.com/data.json', function(data) {
    var features = geojsonFormat.readFeatures(data
        {featureProjection:"EPSG:3857"});
    geojsonSource.clear();
    geojsonSource.addFeatures(features);
  });
}, 5000);

jQuery se usa aquí para solicitar los datos a través de Ajax ( $.ajax), pero obviamente puede usar la biblioteca de su elección.

Este fragmento de código también supone que las proyecciones del mapa son "EPSG: 3857" (web mercator) y que las coordenadas en los documentos GeoJSON son longitudes y latitudes.


3
Este código me confunde, ¿debería vectorSourcey geojsonSourcedebe fusionarse?
Kelly Thomas

Creo que te refieres a window.setInterval no setTimeout; de lo contrario solo lo hace una vez.
Jonathan

9

Sé que esta pregunta es antigua, pero finalmente encontré una solución para actualizar una capa en Openlayers 3.

Debe actualizar los parámetros de la fuente de la capa de esta manera:

var source = yourLayer.getSource();
var params = source.getParams();
params.t = new Date().getMilliseconds();
source.updateParams(params);

3
Parece que no todas las fuentes admiten el updateParamsmétodo; OL3.18.2 sólo muestra que para ImageArcGISRest, ImageMapGuide, ImageWMS, TileArcGISResty TileWMS, y no para, por ejemplo, ol.source.Vector.
Arjan

Date # getTime puede ser mejor que Date # getMilliseconds para invalidar el caché y forzar a la capa a volver a dibujar, ya que garantizará un número único cada vez.
walkermatt

5

Puede actualizar una capa WFS con myLayer.getSource().clear().


1
Esto lo hizo por mí con OpenLayers 3 v. 0.14.2 y una fuente de vectores WFS GeoJSON.
Dirk

3
nada de malo con una respuesta de una línea si están en el dinero. debería haber un premio de reputación para que se elimine este cuadro de información.
Dennis Bauszus

1
La respuesta es correcta, pero esto puede mostrar algunos parpadeos: al llamar, clear()las características existentes se eliminarán del mapa de inmediato y solo se agregarán nuevamente después de recibir la respuesta HTTP. Esto es cierto tanto para especificar un valor para VectorOptions#urlcomo para VectorOptions#loader. Para los datos en tiempo real, hacer manualmente algo de WebSockets o magia XHR y luego llamar getSource().clear()seguido getSource().addFeatures(...)podría ser mejor para el usuario final.
Arjan

3

Con OL2 utilicé una estrategia de actualización de capa que no se ha agregado a OL3. A continuación se muestra una función de llamada automática que utilizará una solicitud ajax para obtener el GeoJSON y luego leerlo y agregarlo a una fuente.

var yourSource = new ol.source.GeoJSON();

//add this source to a layer, the layer to a map with a view etc
...

//now fetch the data
var fetchData = function () {
    jQuery.ajax(url,
    {
        dataType: 'json',
        success: function (data, textStatus, jqXHR) {
            yourSource.clear(); //remove existing features
            yourSource.addFeatures(yourSource.readFeatures(data));
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });

    //call this again in 5 seconds time
    updateTimer = setTimeout(function () {
        fetchData();
    }, 5000);
};
fetchData(); //must actually call the function!

Espero que esto ayude.


2

Esto funciona perfecto para capas:

layer.changed();

según http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html#changed


1
Necesita explicar un poco más sobre cómo layer.changed();funciona perfecto (ly) para las capas. La descripción de la documentación Increases the revision counter and dispatches a 'change' event.no es realmente útil. ¿Cómo responde el uso del método change () a la pregunta sobre cómo volver a dibujar el mapa cada 5 segundos?
nmtoken

He usado Ajax para guardar una fuente geojson revisada, y el problema que tuve fue que si cerraba la capa y la volvía a abrir, el mapa usaba la versión en caché (no revisada) de la fuente. Una vez que borré el caché, la capa usó la fuente revisada como era de esperar. Desafortunadamente, lo sugerido layer.changed();no tuvo ningún efecto para mí, pero source.changed();funcionó.
Peter Cooper el

1

No hay necesidad de actualizar explícitamente. Cada vez que actualiza el contenido de una capa, el mapa se actualiza solicitando una nueva representación del marco.

Para forzar manualmente la representación que tiene map.render()y map.renderSync()métodos.


Eso no actualiza el contenido, solo actualiza el lienzo del mapa.
Mapper
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.