Jak zmienić rozmiar funkcji i zapobiec skalowaniu podczas powiększania w OpenLayers 3

14

Zainicjowałem niestandardową mapę OpenLayers 3 (używaną do pokazywania domów na sprzedaż w sąsiedztwie) z obrazem jako mapą.

Następnie dynamicznie tworzę dodatkowe elementy i warstwy dla każdego domu (kotwica każdego elementu jest ustawiana jako środek jego obrazu).

Próbowałem użyć tej sizewłaściwości podczas inicjowania funkcji, ale powoduje ona przycięcie obrazu zamiast zmiany jego rozmiaru.

Myślę, że widziałem resizefunkcję warstw gdzieś w OL2, ale nie mogę jej znaleźć w OL3 ... czy tego rodzaju funkcja osiągnęłaby pożądany przeze mnie wynik?

Istnieje również problem polegający na tym, że funkcje skalują się o wiele za daleko, gdy są pomniejszane z mapy, a skalują się za małe, gdy są bardzo powiększane. Czy istnieje sposób na określenie współrzędnych obiektu, a następnie wykonanie jakiegoś niewidocznego marginesu / wypełnienia wokół niego, aby nie stał się zbyt duży lub zbyt mały (jakiś rodzaj wielkości statycznej)?

Oto rzeczywiste zachowanie funkcji (widoczna tutaj funkcja to czarny dom): Oddalony- Dalej: Idealny rozmiar, dom powinien być jednak znacznie mniejszy po pomniejszeniu (jak widać na pierwszym zdjęciu). Idealny zoom- Dom powinien był pozostać większy, zamiast zmniejszać na tym ostatnim zdjęciu. Za bardzo powiększyłem.

Jeff Noel
źródło

Odpowiedzi:

14

Zakładam, że używasz ol.style.Icon. ol.style.Iconma scale opcję , której można użyć do skalowania obrazu ikony.

Na przykład, jeśli chcesz przeskalować obraz, użyjesz czegoś takiego:

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

Teraz, jeśli chcesz mieć różne scalewartości w oparciu o bieżącą rozdzielczość, możesz przekazać funkcję stylu do warstwy wektorowej:

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

Zauważ, że jako optymalizacja powyższy kod ponownie wykorzystuje ol.style.Iconobiekt, ol.style.Styleobiekt i tablicę stylów, aby uniknąć tworzenia obiektów przy każdym wywołaniu funkcji stylu.

erilem
źródło
1
W końcu udało mi się to dzięki tobie. Trochę zaadaptowałem twój kod: źródło musi zawierać samą funkcję: source: new ol.source.Vector({features:[iconFeature]})w przeciwnym razie nic nie zostanie wstawione do warstwy (z jakiegoś powodu, prawdopodobnie związane z elementem geometrii funkcji).
Jeff Noel,