Openlayers 为所有特征设置与背景层完全相同的比例答案

【问题标题】：Openlayers set exact same scale as background-layer to all featuresOpenlayers 为所有特征设置与背景层完全相同的比例
【发布时间】：2017-07-16 00:38:23
【问题描述】：

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

【问题讨论】：

我认为它与 ol.geom.Point() 有关，当我使用 ol.geom.Circle 时，Feature 不会随分辨率调整大小。不幸的是，我在文档中找不到这个......并且使用 ol.geom.circle 我还没有设法显示我的自定义 SVG......
我刚刚添加了一个代码示例以便更好地清除

标签： javascript angular typescript openlayers

【解决方案1】：

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

这需要一个样式函数作为样式，你可以根据分辨率缩放图标：

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

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

还要注意ol.layer.Vector 实例配置了

updateWhileAnimating: true,
updateWhileInteracting: true

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

【讨论】：