วิธีการปรับขนาดคุณสมบัติและป้องกันไม่ให้ปรับขนาดเมื่อซูมใน OpenLayers 3

ฉันได้เริ่มต้นแผนที่ OpenLayers 3 ที่กำหนดเอง (ใช้เพื่อแสดงบ้านเพื่อขายในพื้นที่ใกล้เคียง) พร้อมรูปภาพเป็นแผนที่

จากนั้นฉันสร้างคุณลักษณะและเลเยอร์เพิ่มเติมแบบไดนามิกสำหรับแต่ละบ้าน (จุดยึดของคุณลักษณะแต่ละรายการตั้งอยู่กึ่งกลางของภาพ)

ฉันพยายามใช้sizeคุณสมบัติเมื่อเริ่มต้นคุณสมบัติ แต่สิ่งที่ทำคือครอบตัดรูปภาพแทนที่จะปรับขนาด

ฉันคิดว่าฉันได้เห็นresizeฟังก์ชั่นสำหรับเลเยอร์บางแห่งใน OL2 แต่ฉันไม่พบมันใน 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วัตถุและอาร์เรย์ของสไตล์มาใช้ใหม่เพื่อหลีกเลี่ยงการสร้างวัตถุในแต่ละครั้งที่เรียกใช้ฟังก์ชันลักษณะ