Cách thay đổi kích thước một tính năng và ngăn không cho nó mở rộng khi phóng to OpenLayers 3

Tôi đã khởi tạo bản đồ OpenLayers 3 tùy chỉnh (được sử dụng để hiển thị các ngôi nhà được bán trong khu phố) với hình ảnh là bản đồ.

Sau đó, tôi tạo các tính năng bổ sung và các lớp một cách linh hoạt cho mỗi ngôi nhà (mỗi neo của tính năng được đặt làm giữa hình ảnh của nó).

Tôi đã cố gắng sử dụng thuộc sizetính khi khởi tạo tính năng, nhưng những gì nó làm là cắt hình ảnh thay vì thay đổi kích thước.

Tôi nghĩ rằng tôi đã thấy resizechức năng cho các lớp ở đâu đó trong OL2, nhưng tôi không thể tìm thấy nó trong OL3 ... loại chức năng đó có đạt được kết quả tôi muốn không?

Ngoài ra còn có vấn đề là các tính năng có tỷ lệ quá lớn khi thu nhỏ khỏi bản đồ và thu nhỏ quá nhỏ khi phóng to rất nhiều. Có cách nào để chỉ định tọa độ của tính năng sau đó thực hiện một số loại lề / phần đệm vô hình xung quanh nó để ngăn nó đi quá lớn hoặc quá nhỏ (một loại kích thước tĩnh) không?

Đây là hành vi thực tế của các tính năng (tính năng được thấy ở đây là ngôi nhà màu đen): - Tiếp theo: Kích thước hoàn hảo, ngôi nhà nên nhỏ hơn khi thu nhỏ mặc dù (như trong hình đầu tiên). - Ngôi nhà nên ở lại lớn hơn, thay vì thu nhỏ lại trong bức ảnh cuối cùng này. .

Tôi giả sử bạn sử dụng một ol.style.Icon. ol.style.Iconcó một scale tùy chọn mà bạn có thể sử dụng để chia tỷ lệ hình ảnh biểu tượng.

Ví dụ: nếu bạn muốn thu nhỏ hình ảnh xuống, bạn sẽ sử dụng một cái gì đó như thế này:

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

Bây giờ, nếu bạn muốn các scalegiá trị khác nhau dựa trên độ phân giải hiện tại, bạn có thể chuyển một hàm kiểu cho lớp vectơ:

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

Lưu ý rằng, như một tối ưu hóa, đoạn mã trên sử dụng lại ol.style.Iconđối tượng, ol.style.Styleđối tượng và mảng kiểu, để tránh tạo đối tượng mỗi khi hàm kiểu được gọi.