openlayers - 使用 map 缩放更改图标大小

Question

我使用 20x20 像素的图标显示在 map 上，代码如下:

当我缩放 map 时，图标显得很小，如何随 map 缩放改变图标大小？

 <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
 <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>

<script>
var baseMapLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

var view = new ol.View({
            center: ol.proj.fromLonLat([-74.0061,40.712]), 
            zoom: 17 //Initial Zoom Level
})

var map = new ol.Map({
    target: 'map',
    layers: [ baseMapLayer],
    view: view
});

// Make a new feature marker
var marker = new ol.Feature({
    name: 'Null Island',
    population: 4000,
    rainfall: 500,
    geometry: new ol.geom.Point(
      ol.proj.fromLonLat([-74.006,40.7127])  // new Point([0, 0])
    ),  // Cordinates of New York's Town Hall
});

// Style the marker
var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
        color: '#ffcd46',
        crossOrigin: 'anonymous',
        src: 'http://127.0.0.1:8081/static/img/truck.png'
    }))
});

marker.setStyle(iconStyle);

// Make a source for the feature 
var vectorSource = new ol.source.Vector({
    features: [marker]
});
// Make a new layer
var markerVectorLayer = new ol.layer.Vector({
    source: vectorSource,
});

map.addLayer(markerVectorLayer);
</script>

Answer 1

您可以使用样式函数来做到这一点，随着分辨率的变化而改变比例。分辨率可能会发生很大变化，因此您可能希望按分辨率的平方根或立方根的反比比例更改比例，试验一下以了解适合您的应用。

如果在功能上设置语法取决于 OpenLayers 的版本

OpenLayers 4:

marker.setStyle(function(resolution) {
    iconStyle.getImage().setScale(1/Math.pow(resolution, 1/3));
    return iconStyle;
});

OpenLayers 5:

marker.setStyle(function(feature, resolution) {
    iconStyle.getImage().setScale(1/Math.pow(resolution, 1/3));
    return iconStyle;
});

或者你可以在图层上设置样式，两个版本的语法是一样的

var markerVectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: function(feature, resolution) {
        iconStyle.getImage().setScale(1/Math.pow(resolution, 1/3));
        return iconStyle;
    }
});