Como redimensionar um recurso e impedir que ele seja redimensionado ao aplicar zoom no OpenLayers 3

Inicializei um mapa OpenLayers 3 personalizado (usado para mostrar casas à venda no bairro) com uma imagem como mapa.

Em seguida, crio recursos e camadas adicionais dinamicamente para cada casa (a âncora de cada recurso é definida como o meio de sua imagem).

Eu tenho tentado usar a sizepropriedade ao inicializar o recurso, mas o que ele faz é cortar a imagem em vez de redimensioná-la.

Eu acho que vi a resizefunção para camadas em algum lugar no OL2, mas não consigo encontrá-lo no OL3 ... esse tipo de função alcançaria o resultado desejado?

Também há o problema de que os recursos estão diminuindo muito quando diminuídos o zoom do mapa e diminuindo muito pequenos quando ampliados demais. Existe uma maneira de especificar as coordenadas do recurso e, em seguida, fazer algum tipo de margens / preenchimento invisíveis ao redor para impedir que ele fique muito grande ou muito pequeno (algum tipo de tamanho estático)?

Aqui está o comportamento real dos recursos (o recurso visto aqui é a casa preta): - Próximo: Tamanho perfeito, a casa deve ser bem menor quando diminuída o zoom (como pode ser visto na primeira foto). - A casa deveria ter ficado maior, em vez de diminuir novamente nesta última foto. .

Eu suponho que você use um ol.style.Icon. ol.style.Icontem uma scale opção que você pode usar para dimensionar a imagem do ícone.

Por exemplo, se você quiser redimensionar uma imagem, usará algo como isto:

var style = new ol.style.Style({
  image: new ol.style.Icon({
    url: 'http://example.com/icon.png',
    scale: 0.5,
    // …
  })
});

Agora, se você quiser scalevalores diferentes com base na resolução atual, poderá passar uma função de estilo para a camada vetorial:

var iconStyle = new ol.style.Icon({
  url: 'http://example.com/icon.png',
  // …
});

var styles = [new ol.style.Style({
  image: iconStyle
})];

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    // "func" is your function that gives you a scale for a resolution
    var scale = func(resolution);
    iconStyle.setScale(scale);
    return styles;
  })
});

Observe que, como uma otimização, o código acima reutiliza o ol.style.Iconobjeto, o ol.style.Styleobjeto e a matriz de estilos, para evitar a criação de objetos sempre que a função de estilo é chamada.