So ändern Sie die Größe eines Features und verhindern, dass es beim Zoomen in OpenLayers 3 skaliert wird

Ich habe eine benutzerdefinierte OpenLayers 3-Karte (die zum Anzeigen von Häusern zum Verkauf in der Nachbarschaft verwendet wird) mit einem Bild als Karte initialisiert.

Dann erstelle ich dynamisch zusätzliche Features und Layer für jedes Haus (der Anker jedes Features wird als Bildmitte festgelegt).

Ich habe versucht , das verwenden sizeEigenschaft , wenn die Funktion der Initialisierung, aber was es tut , ist zu beschneiden das Bild , anstatt es zu Ändern der Größe.

Ich glaube, ich habe die resizeFunktion für Layer irgendwo in OL2 gesehen, aber ich kann sie in OL3 nicht finden. Würde diese Art von Funktion das gewünschte Ergebnis erzielen?

Es gibt auch das Problem, dass die Features beim Verkleinern der Karte viel zu groß und beim Vergrößern viel zu klein skaliert werden. Gibt es eine Möglichkeit, die Koordinaten des Features anzugeben, und dann unsichtbare Ränder / Abstände, um zu verhindern, dass es zu groß oder zu klein wird (irgendeine statische Größe)?

Hier ist das tatsächliche Verhalten von Features (das Feature, das hier zu sehen ist, ist das schwarze Haus): - Weiter: Perfekte Größe, das Haus sollte jedoch viel kleiner sein, wenn es herausgezoomt wird (wie auf dem ersten Bild zu sehen). - Das Haus hätte größer bleiben sollen, anstatt es auf diesem letzten Bild noch einmal zu verkleinern. .

Ich nehme an, Sie verwenden eine ol.style.Icon. ol.style.Iconverfügt über eine scale Option , mit der Sie das Symbolbild skalieren können.

Wenn Sie beispielsweise ein Bild verkleinern möchten, verwenden Sie Folgendes:

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

Wenn Sie nun unterschiedliche scaleWerte basierend auf der aktuellen Auflösung wünschen , können Sie der Vektorebene eine Stilfunktion übergeben:

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

Beachten Sie, dass der obige Code als Optimierung das ol.style.IconObjekt, das ol.style.StyleObjekt und das Array von Stilen wiederverwendet , um zu vermeiden, dass bei jedem Aufruf der Stilfunktion Objekte erstellt werden.