OpenLayers 3でズームするときに機能のサイズを変更し、スケーリングしないようにする方法

マップとして画像を使用して、カスタムOpenLayers 3マップ（近隣で販売されている家を表示するために使用）を初期化しました。

次に、家ごとに追加のフィーチャとレイヤーを動的に作成します（各フィーチャのアンカーはその画像の中央に設定されます）。

size機能を初期化するときにプロパティを使用しようとしましたが、それはサイズを変更する代わりに画像をトリミングします。

resizeOL2のどこかでレイヤーの関数を見たことがあると思いますが、OL3で見つけることができません...その種の関数は、私が望む結果を達成するでしょうか？

また、マップからズームアウトすると機能が大きく拡大しすぎ、拡大すると小さすぎると縮小するという問題もあります。機能の座標を指定してから、目に見えない余白/パディングを行って、大きすぎたり小さすぎたりしないようにする方法がありますか？

機能の実際の動作は次のとおりです（ここに表示されている機能は黒い家です） 。-次：完璧なサイズ。ズームアウトすると家はずっと小さくなります（最初の写真を参照）。-この最後の写真で再び縮小するのではなく、家を大きくしておくべきです。。

を使用すると仮定しますol.style.Icon。ol.style.Icon持っているscale オプションアイコンの画像を拡大・縮小する場合に使用することができます。

たとえば、画像を縮小する場合は、次のようなものを使用します。

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

現在、scale現在の解像度に基づいて異なる値が必要な場合は、ベクターレイヤーにスタイル関数を渡すことができます。

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

最適化として、上記のコードはol.style.Iconオブジェクト、ol.style.Styleオブジェクト、およびスタイルの配列を再利用し、スタイル関数が呼び出されるたびにオブジェクトを作成しないようにします。