Question

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

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

当我缩小时，功能越来越大，当我放大功能越来越小时。我希望它们总是具有相同的大小，以便在我缩小时它们变得更小（就好像它将是地图上的静态内容）。

我尝试了一个额外的样式功能，并通过重新计算该功能的当前样式的比例进行实验。但我没有让它发挥作用。

所以我的问题是：如何在现有图层上方放置另一个具有要素的图层，当缩小时，所有内容都变小？

我做错了吗？我需要预测吗？我是Openlayers的新手。

提前致谢！

一个最小的代码示例，SVG-Points在缩小时越来越大（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？

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

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

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

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

updateWhileAnimating: true,
updateWhileInteracting: true

确保每当分辨率发生变化时图标大小都会更新。

Openlayers为背景层设置与所有要素

1 个答案: