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

14

Inicialicé un mapa personalizado de OpenLayers 3 (usado para mostrar casas en venta en el vecindario) con una imagen como mapa.

Luego, creo características adicionales y capas dinámicamente para cada casa (el anclaje de cada característica se establece como el centro de su imagen).

He estado tratando de usar la sizepropiedad al inicializar la función, pero lo que hace es recortar la imagen en lugar de cambiar su tamaño.

Creo que he visto la resizefunción para capas en algún lugar de OL2, pero no puedo encontrarla en OL3 ... ¿ese tipo de función lograría el resultado que quiero?

También existe el problema de que las características se escalan demasiado cuando se alejan del mapa y se reducen demasiado cuando se amplían mucho. ¿Hay alguna manera de especificar las coordenadas de la entidad y luego hacer algún tipo de margen / relleno invisible a su alrededor para evitar que se vuelva demasiado grande o demasiado pequeño (algún tipo de tamaño estático)?

Aquí está el comportamiento real de las características (la característica que se ve aquí es la casa negra): Alejado- Siguiente: tamaño perfecto, la casa debería ser mucho más pequeña cuando se aleja (como se ve en la primera imagen). Zoom perfecto- La casa debería haberse quedado más grande, en lugar de reducirse nuevamente en esta última foto. Zoom demasiado.

Jeff Noel
fuente

Respuestas:

14

Supongo que usas un ol.style.Icon. ol.style.Icontiene una scale opción que puede usar para escalar la imagen del icono.

Por ejemplo, si desea reducir una imagen, 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 desea scalevalores diferentes en función de la resolución actual, puede pasar 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 reutiliza el ol.style.Iconobjeto, el ol.style.Styleobjeto y la matriz de estilos, para evitar crear objetos cada vez que se llama a la función de estilo.

erilem
fuente
1
Finalmente lo puse a trabajar, gracias a ti. He adaptado un poco su código: la fuente debe incluir la característica en sí: de lo source: new ol.source.Vector({features:[iconFeature]})contrario, no se inserta nada dentro de la capa (por alguna razón, probablemente relacionada con el elemento de geometría de la característica).
Jeff Noel