Mais

Atualizando o mapa após alterar o estilo do recurso no OpenLayers 3

Atualizando o mapa após alterar o estilo do recurso no OpenLayers 3


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 recursos (ol.Feature) são adicionados às fontes vetoriais, eles recebem umdadospropriedade que é definida para o objeto javascript que o recurso representa. TypeScript segue ...

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

As camadas vetoriais têm uma função de estilo que lê odadospropriedade e recupera seu estilo:

vectorLayer = new ol.layer.Vector ({source: vectorSource, renderBuffer: / *… * /, style: function (feature: ol.Feature, resolution: any) {var data = feature.get ('dados'); if ((dados) && (data.style)) {return [data.style]; } else {/ * retornar o estilo padrão * /}}});

À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, desdedata.styleestá totalmente sob meu controle, alterá-lo é trivial.

O problema é que o mapa não sabe que o estilo mudou. Se eu mudar o estilo de um objeto e, em seguida, 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 faço para forçar a atualização do mapa de maneira programática?

Depois de alguma pesquisa e experimentação, tentei:

  1. Chamandorender ()nool.Mapem si.
  2. ChamandodispatchChangeEvent ()nool.source.Vector
  3. Chamandoredesenhar()nool.layer.Vector

Eles foram sugeridos, mas nenhum deles funcionou, o que não é surpreendente, já que 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.


Por acaso, encontrei a resposta - é para ligarmudado()nos próprios recursos depois de alterar oestilopropriedade de seus dados associados. Consulte: http://openlayers.org/en/v3.2.0/apidoc/ol.Feature.html?unstable=true#changed

Isso exige que eu acompanhe ool.Featureobjetos associados a cadavectorDataobjeto (anteriormente, eu só precisava encontrar ovectorDatade um recurso, o que poderia ser feito comobter()), mas isso não é muito caro.

(Eu descobri isso olhando parasetGeometryesetStylee outros métodos emol.Featurepara ver o que eles fazem.)


Passei uma semana tentando descobrir como fazer um elemento (polígono) desaparecer do mapa depois de excluí-lo (vectorSource.removeFeature (selectedFeature). E nenhuma solução funcionou. Estranhamente, o OL3 v3.15.1 atual não tem função básica de atualização / renderização forçada que funcione! A solução que funcionou para mim foi mudarselectedFeatureestilo de:

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.


A resposta de Xharlie me ajudou com a ideia da mudança de chamada, exceto que, em alguns casos, você tem que chamá-la na camada em vez do recurso. No meu caso, eu tinha uma função de estilo vinculada à camada e o estilo usava uma geometria calculada em vez da geometria do recurso.

layer.changed () map.once ('rendercomplete', () => {layer.changed ()}) map.renderSync ()

ps: Na verdade, faço tudo isso mais uma vez dentro do primeiro ouvinte renderercomplete; e desabilitar a interação do usuário durante esse tempo; não é ideal, especialmente quando é longo para computar, então se você puder evitar esse tipo de hack da melhor maneira para você.


Assista o vídeo: OpenLayers Add Vector Layer to Web Map