Cómo cambiar el tamaño de una función y evitar que se de escala cuando el zoom en OpenLayers 3

Question

He inicializado una costumbre OpenLayers 3 mapa de (utilizados para mostrar casas en venta en el barrio) con una imagen del mapa.

Entonces, creo adicional y características de las capas de forma dinámica para cada casa (de cada función de anclaje se establece como el medio de su imagen).

He estado tratando de utilizar la size de la propiedad cuando se inicializa la función, pero lo que hace es recortar la imagen en lugar de cambiar su tamaño.

Creo que he visto el resize función para las capas en algún lugar en OL2, pero no puedo encontrar en OL3... ¿que tipo de función de lograr el resultado que deseo?

También hay el problema de que las características son de escala demasiado grande cuando se aleja de el mapa, y la reducción de la escala demasiado pequeña cuando se acerca mucho. Es allí una manera de especificar la función de coordenadas, a continuación, hacer algún tipo de invisible márgenes/relleno alrededor de la misma para evitar que vayan demasiado grande o demasiado pequeño (algún tipo de estática tamaño) ?

Aquí es el comportamiento real de las características (la característica visto aquí es el negro de la casa): - Siguiente: tamaño Perfecto, la casa debe ser de manera más pequeño cuando se aleja, aunque (como se ve en la primera foto). - La casa debe de haber permanecido más grande, en lugar de disminuir de nuevo en esta última foto..

Answer 1

Supongo que usted utilice un ol.style.Icon. ol.style.Icon tiene un scale opción que se puede utilizar la escala de la imagen del icono.

Por ejemplo, si desea ajustar una imagen abajo de usted usar algo como esto:

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

Ahora, si quieres diferentes scale valores basados en la resolución actual, usted puede pasar a una función de estilo a la capa vectorial:

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;
  })
});

Tenga en cuenta que, como optimización, el código anterior se reutiliza la ol.style.Icon objeto, ol.style.Style objeto y la variedad de estilos, para evitar la creación de objetos cada vez que el estilo se llama a la función.