Equivalente a layer.redraw (true) no OpenLayers 3?


13

Eu tenho uma camada geojson no meu aplicativo OL3 que desejo redesenhar a cada 5 segundos (para mostrar o movimento no mapa).

Como eu faço isso ? Não foi possível encontrar o equivalente a Layer.redraw ().


Você já viu a ol.animation? Em geral, o desenho vetorial é mais suave e tratado diferentemente no ol3, mas não está totalmente claro na sua pergunta o que você deseja fazer.
John Powell

@ JohnBarça - Meus dados do GeoJson são provenientes do postgres, que é atualizado a cada 5 segundos com os novos dados do GPS. Quero redesenhar a camada para mostrar cada vez que a posição atual das unidades no mapa (que sempre a mudar ...)
Alophind

Então, você está solicitando dados a cada 5 segundos usando uma chamada recursiva setTimeout (ou algo semelhante) e deseja saber como forçar a atualização dos recursos vetoriais?
John Powell

@ JohnBarça - Se existe uma maneira melhor de aprender, mas é isso que faço, quero mostrar a localização do GPS em tempo real no mapa. O GPS envia sua localização para o PostGIS e, a partir daí, leio os dados usando o GeoJSON (ou posso usar o GeoServer), mas desejo que a camada se atualize de vez em quando.
Alophind

Claro, eu entendo o que você está tentando fazer. Qualquer chance de um exemplo de código, porque na minha experiência, se você colocar um loop de animação em settimeout, com uma chamada ajax para um servidor remoto e carregar o json que voltar usando o Format.GeoJSON ou similar, os recursos serão atualizados.
John Powell

Respostas:


9

É assim que você pode atualizar uma fonte de vetor a cada 5 segundos, a partir de um serviço da Web que retorna recursos em um 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);

O jQuery é usado aqui para solicitar os dados através do Ajax ( $.ajax), mas você pode obviamente usar a biblioteca de sua escolha.

Esse trecho de código também pressupõe que as projeções do mapa sejam "EPSG: 3857" (web mercator) e que as coordenadas nos documentos do GeoJSON sejam longitudes e latitudes.


3
Esse código me confunde, deve vectorSourcee deve geojsonSourceser mesclado?
55678 Kelly Thomas

Eu acho que você quer dizer window.setInterval não setTimeout; caso contrário, só o faz uma vez.
Jonathan

9

Eu sei que essa pergunta é antiga, mas finalmente encontrei uma solução para atualizar uma camada nos openlayers 3.

Você precisa atualizar os parâmetros da origem da camada assim:

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

3
Parece que nem todas as fontes suportam o updateParamsmétodo; OL3.18.2 apenas mostra que para ImageArcGISRest, ImageMapGuide, ImageWMS, TileArcGISReste TileWMS, e não para, por exemplo, ol.source.Vector.
Arjan

A data # getTime pode ser melhor que a Data # getMilliseconds para invalidar o cache e forçar a camada a redesenhar, pois garantirá um número único a cada vez.
walkermatt

5

Você pode atualizar uma camada WFS com myLayer.getSource().clear().


1
Isso foi feito por mim com o OpenLayers 3 v. 0.14.2 e uma fonte vetorial WFS GeoJSON.
Dirk

3
nada de errado com uma resposta de uma linha, se eles estão no dinheiro. deve haver um prêmio de reputação para remover essa caixa de informações.
Dennis Bauszus

1
A resposta está correta, mas isso pode mostrar alguns tremores: ao chamar, clear()qualquer recurso existente será removido do mapa imediatamente e somente será adicionado novamente após o recebimento da resposta HTTP. Isso vale tanto para a especificação de um valor para VectorOptions#urle para VectorOptions#loader. Para dados em tempo real, executar manualmente algumas magias do WebSockets ou XHR e depois fazer chamadas getSource().clear()seguidas por getSource().addFeatures(...)pode parecer melhor para o usuário final.
precisa saber é o seguinte

3

Com o OL2, usei uma estratégia de atualização de camada que não foi adicionada ao OL3. Abaixo está uma função de auto-chamada que usará uma solicitação ajax para buscar o GeoJSON e, em seguida, lê-lo e adicioná-lo a uma fonte.

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 isto ajude.


2

Isso funciona perfeito para camadas:

layer.changed();

conforme http://openlayers.org/en/latest/apidoc/ol.layer.Vector.html#changed


1
Você precisa explicar um pouco mais sobre como layer.changed();funciona perfeitamente (camadas) para camadas. A descrição da documentação Increases the revision counter and dispatches a 'change' event.não é realmente útil. Como o uso do método alterado () responde à pergunta sobre o redesenho do mapa a cada 5 segundos?
NmToken

Eu usei o Ajax para salvar uma fonte geojson revisada e o problema que tive foi que, se eu fechasse a camada e a abrisse novamente, o mapa usaria a versão em cache (não revisada) da fonte. Depois de limpar o cache, a camada usava a fonte revisada como seria de esperar. Infelizmente, o sugerido layer.changed();não teve efeito para mim, mas source.changed();fez o truque.
Peter Cooper

1

Não há necessidade de atualizar explicitamente. Cada vez que você atualiza o conteúdo de uma camada, o mapa é atualizado solicitando uma nova renderização de quadro.

Para forçar a renderização manualmente, você tem map.render()e map.renderSync()métodos.


Isso não atualiza o conteúdo, apenas atualiza a própria tela do mapa.
Mapper
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.