Cara mengubah ukuran fitur dan mencegah penskalaan saat memperbesar di OpenLayers 3

Saya telah menginisialisasi peta OpenLayers 3 khusus (digunakan untuk menunjukkan rumah untuk dijual di lingkungan) dengan gambar sebagai peta.

Kemudian, saya membuat fitur tambahan dan lapisan secara dinamis untuk setiap rumah (jangkar masing-masing fitur diatur sebagai bagian tengah gambarnya).

Saya sudah mencoba menggunakan sizeproperti ketika menginisialisasi fitur, tetapi yang dilakukannya adalah memotong gambar alih-alih mengubah ukurannya.

Saya pikir saya telah melihat resizefungsi untuk lapisan di suatu tempat di OL2, tetapi saya tidak dapat menemukannya di OL3 ... apakah fungsi semacam itu mencapai hasil yang saya inginkan?

Ada juga masalah bahwa fitur penskalaan terlalu besar ketika diperbesar dari peta, dan penskalaan terlalu kecil saat diperbesar. Apakah ada cara untuk menentukan koordinat fitur kemudian melakukan semacam margin yang tidak terlihat / padding di sekitarnya untuk mencegahnya menjadi terlalu besar atau terlalu kecil (semacam ukuran statis)?

Berikut adalah perilaku sebenarnya dari fitur (fitur yang terlihat di sini adalah rumah hitam): - Berikutnya: Ukuran sempurna, rumah harus jauh lebih kecil ketika diperbesar meskipun (seperti yang terlihat pada gambar pertama). - Rumah itu seharusnya tetap lebih besar, daripada mengurangi lagi di gambar terakhir ini. .

Saya menganggap Anda menggunakan ol.style.Icon. ol.style.Iconmemiliki scale opsi yang dapat Anda gunakan untuk skala gambar ikon.

Misalnya, jika Anda ingin menurunkan skala gambar Anda akan menggunakan sesuatu seperti ini:

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

Sekarang, jika Anda menginginkan scalenilai yang berbeda berdasarkan pada resolusi saat ini, Anda bisa meneruskan fungsi style ke layer vektor:

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

Perhatikan bahwa, sebagai pengoptimalan, kode di atas menggunakan kembali ol.style.Iconobjek, ol.style.Styleobjek dan array gaya, untuk menghindari membuat objek setiap kali fungsi gaya dipanggil.