javascript - Openlayers đặt cùng một tỷ lệ chính xác như lớp nền cho tất cả các đối tượng

Tôi đã sử dụng OpenLayers trong Angular2 để hiển thị một hình SVG tùy chỉnh làm bản đồ nền. Điều này hoạt động hoàn hảo và tôi có thể phóng to và cuộn trên bản đồ của mình.

Bây giờ tôi đã triển khai các Tính năng (cũng bao gồm svg) và đặt tất cả chúng vào một Lớp Vector riêng biệt phía trên bản đồ. Chúng đều được hiển thị nhưng khi tôi phóng to, chúng bị thay đổi kích thước một cách lạ.

Khi tôi thu nhỏ, các tính năng lại trở nên lớn hơn, khi tôi phóng to các tính năng lại trở nên nhỏ hơn. Tôi muốn chúng luôn có cùng một kích thước, để khi tôi thu nhỏ chúng lại trở nên nhỏ hơn (như thể chúng là nội dung tĩnh trên bản đồ).

Tôi đã thử với một hàm kiểu bổ sung và thử nghiệm bằng cách tính lại tỉ lệ của kiểu hiện tại của đối tượng. Nhưng tôi đã không làm được điều này.

Vậy câu hỏi của tôi là: Làm thế nào để tôi đặt một Lớp khác với các Đặc điểm lên trên một lớp hiện có và khi thu nhỏ mọi thứ sẽ trở nên nhỏ hơn?

Tôi có đang làm sai điều gì không? Tôi có cần Dự đoán không? Tôi còn khá mới với Openlayers.

Cảm ơn trước!

Một ví dụ mã tối giản, các điểm SVG càng lúc càng lớn khi thu nhỏ (cùng vấn đề trong ví dụ mã OL: Ví dụ Mã Chính Thức: Khi thu nhỏ, điểm đánh dấu lại to bằng cả một quốc gia hoặc châu lục....

let center = ol.proj.transform([8.30368, 47.05243], 'EPSG:4326', 'EPSG:3857');
let style = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0, 0],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '/assets/images/test.svg',
            imgSize: [50, 50],
            size: [50, 50],
            scale: 1.0
        })
    });

    let iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(center)
    });

    iconFeature.setStyle((resolution) => {
        return [iconStyle];
    });

    this.featureArray.push(iconFeature);

    let vectorSource = new ol.source.Vector({
        features: this.featureArray
    });
    let extent = [0, 0, 1024, 968];
    let projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
    });

    // load vector layer for dynamic elements
    let vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        projection: projection,
        imageExtent: extent
    });

    this.layerArray.push(vectorLayer);

    // basic setup
    this.map = new ol.Map({
        renderer: 'canvas',
        layers: this.layerArray,
        view: new ol.View({
            center: center,
            zoom: 16,
            minZoom: 1,
            maxZoom: 26,
        })
    });

Câu trả lời #1

Ý bạn là thứ gì đó giống như https://codepen.io/anon/pen/WOmqmN?&editors=1110?

Điều đó yêu cầu một hàm kiểu như style, nơi bạn điều chỉnh kích thước biểu tượng theo độ phân giải:

function(feature, resolution) {
  style.getImage().setScale(16000 / resolution);
}

16000 là độ phân giải mà tại đó kích thước biểu tượng nên bằng kích thước gốc của hình ảnh biểu tượng.

Cũng lưu ý rằng thể hiện ol.layer.Vector được cấu hình với

updateWhileAnimating: true,
updateWhileInteracting: true

để đảm bảo kích thước biểu tượng được cập nhật mỗi khi độ phân giải thay đổi.