Openlayers 为所有功能设置与背景层完全相同的比例

Question

我在 Angular2 中使用 OpenLayers 将自定义 SVG 图像显示为背景图。这非常有效，我可以缩放和滚动我的地图。

现在我实现了功能（也是 svg）并将它们全部放在地图上方的单独矢量层中。它们都显示出来了，但是当我缩放时，它们的大小调整得很奇怪。

缩小时特征变大，放大时特征变小。我想让它们始终保持相同的大小，这样当我缩小时它们会变小（就像地图上的静态内容一样）。

我尝试了一个额外的样式函数，并通过重新计算特征当前样式的比例进行了试验。但是我没有让它工作。

所以我的问题是：如何将另一个具有特征的图层放在现有图层之上，并且在缩小时一切都变小？

我是不是做错了什么？我需要投影吗？我对 Openlayers 很陌生。

提前致谢！

一个最小的代码示例，缩小时 SVG 点越来越大（OL 代码示例中的相同问题：Official Code Example：缩小时，标记变得与整个国家一样大或大陆....

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

Answer 1

你的意思是 https://codepen.io/anon/pen/WOmqmN?&editors=1110?

需要一个style函数作为style，根据分辨率缩放图标：

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

16000 是图标大小应为图标图像原始大小的分辨率。

另请注意，ol.layer.Vector 实例配置为

updateWhileAnimating: true,
updateWhileInteracting: true

确保图标大小在分辨率更改时更新。

Openlayers 为所有功能设置与背景层完全相同的比例

Openlayers set exact same scale as background-layer to all features

javascript

openlayers

typescript

angular