OpenLayers 3: Como atualizar o mapa após alterar o estilo de um recurso?

9

Eu tenho um mapa do OpenLayers 3.2.0 que apresenta algumas fontes vetoriais ( ol.source.Vector) e camadas vetoriais associadas ( ol.layer.Vector)

Quando Features ( ol.Feature) são adicionados às fontes de vetor, eles recebem uma datapropriedade definida para o objeto javascript que o recurso representa. O TypeScript segue ...

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

As camadas vetoriais têm uma função de estilo que lê a datapropriedade e recupera seu 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 */
        }
    }
});

Às vezes, eventos não relacionados ao mapa fazem com que os estilos mudem. Por exemplo, quando um objeto se torna inválido, seu estilo muda. Claramente, uma vez que data.styleestá inteiramente sob meu controle, mudá-lo é trivial.

O problema é que o mapa não sabe que o estilo mudou. Se eu mudar o estilo de um objeto e depois ampliar o mapa, forçando-o a redesenhar, noto que minhas funções de estilo são executadas e retornam o novo estilo e o recurso é redesenhado. Como forço programaticamente a atualização do mapa?

Após algumas pesquisas e experimentações, tentei:

  1. Invocando render()a ol.Mapsi mesmo.
  2. Chamando dispatchChangeEvent()ool.source.Vector
  3. Chamando redraw()ool.layer.Vector

Eles foram sugeridos, mas nenhum deles funcionou, o que não é surpreendente, pois apenas o primeiro método está listado na documentação da API do OpenLayers 3.2.0 e não está marcado como estável.

openlayers-2 Xharlie
fonte
você tentou vectorlayer.refresh ({force: true}); ?
17335
Eu tenho, mas sem surpresa, isso não funciona porque esse é um método OpenLayers 2.
Xharlie

Respostas:

12

Por acaso, me deparei com a resposta - é recorrer changed()aos recursos depois de alterar a stylepropriedade dos dados associados. Consulte: http://openlayers.org/en/v3.2.0/apidoc/ol.Feature.html?unstable=true#changed

Isso exige que eu acompanhe os ol.Featureobjetos associados a cada vectorDataobjeto (anteriormente, eu só precisava encontrar o vectorDatade um recurso, o que poderia ser feito get()), mas isso não custa muito.

(Eu achei isso olhando setGeometrye setStylee outros métodos sobre ol.Featurepara ver o que eles fazem.)

Xharlie
fonte
Embora essa abordagem funcione, exigir changedum número razoável de recursos implica uma penalidade de desempenho bastante séria (travou o Chrome várias vezes dessa maneira). Eu recomendo chamar changed()a fonte da sua camada depois que todos os seus recursos forem alterados.
Kyle
0

Passei uma semana tentando descobrir como fazer um recurso (Polígono) desaparecer do mapa depois de excluí-lo ( vectorSource.removeFeature(selectedFeature). E nenhuma solução funcionou. Estranhamente, o OL3 atual v3.15.1 não possui a função básica de atualização forçada / renderização que A solução que funcionou para mim foi mudar selectedFeatureo 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)

Qualquer estilo funcionaria, pois o recurso já foi removido da camada, mas não atualizado.

Morey
fonte