جاوااسکریپت - OpenLayers تنظیم همان مقیاس دقیق لایه پسزمینه برای تمامی المانها

من از OpenLayers در Angular2 برای نمایش یک تصویر SVG سفارشی به عنوان نقشه پسزمینه استفاده کردم. این بهطور کامل کار میکند و میتوانم روی نقشه خود زوم و پیمایش کنم.

حالا من ویژگیها (همچنین SVG) را پیادهسازی کردم و همهی آنها را در یک لایه برداری جداگانه بالای نقشه قرار دادم. آنها همه نمایش داده میشوند اما وقتی بزرگنمایی میکنم، اندازهشان به شکل عجیبی تغییر میکند.

وقتی زوم را کاهش میدهم، ویژگیها بزرگتر میشوند، وقتی زوم را افزایش میدهم ویژگیها کوچکتر میشوند. من میخواهم که آنها همیشه در همان اندازه باقی بمانند، به طوری که هنگام کاهش زوم کوچکتر شوند (مثل اینکه محتوای ثابت روی نقشه باشد).

من با یک تابع سبک اضافی امتحان کردم و با بازمحاسبه مقیاس سبک فعلی ویژگی آزمایش کردم. اما نتوانستم این را عملی کنم.

پس سؤال من این است: چگونه میتوانم یک لایه دیگر با ویژگیها بالای یک لایه موجود قرار دهم و وقتی بزرگنمایی به بیرون انجام میشود، همه چیز کوچکتر میشود؟

آیا کار اشتباهی انجام میدهم؟ آیا به پروژهها نیاز دارم؟ من تازه با Openlayers آشنا شدهام.

پیشاپیش ممنون!

یک مثال کد مینیمال، نقاط SVG هنگام زوم کردن بیرون، بزرگ و بزرگتر میشوند (مشکل مشابه در مثال کد OL: مثال کد رسمی: هنگام زوم کردن بیرون، نشانگر به اندازه کل یک کشور یا قاره میشود...)

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

پاسخ شماره ۱

منظورت چیزی شبیه https://codepen.io/anon/pen/WOmqmN?&editors=1110 است؟

این نیاز به یک تابع سبک به نام style دارد، جایی که آیکون را متناسب با وضوح تنظیم میکنید:

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

16000 وضوحی است که در آن اندازه آیکون باید اندازه اصلی تصویر آیکون باشد.

همچنین توجه داشته باشید که نمونه ol.layer.Vector با تنظیم شده است

updateWhileAnimating: true,
updateWhileInteracting: true

برای اطمینان از اینکه اندازه آیکون هر زمان که وضوح تغییر میکند بهروزرسانی شود.