OpenLayers 3调整要素的大小

Question

我的应用程序使用OpenLayers 3和OpenStreetMap。我已经设法在地图上绘制了圆圈矢量来绘制标记，但我遇到的问题是，放大和缩小时，圆圈的大小总是相同的。如何根据分辨率更改矢量的大小？

这是我的矢量定义：

var dealerSource = new ol.source.Vector();
function dealerStyle(feature) {
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 6,
            stroke: new ol.style.Stroke({
                color: 'white',
                width: 2
            }),
            anchor: [1.5, 1.5],
            fill: new ol.style.Fill({
                color: 'green'
            })
        })
    });
    return [style];
}

Answer 1

您可以根据缩放级别更改圆圈的大小(如果您想这样做的话(

var dealerSource = new ol.source.Vector();
function dealerStyle(feature) {
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: map.getView().getZoom(),
            stroke: new ol.style.Stroke({
                color: 'white',
                width: 2
            }),
            anchor: [1.5, 1.5],
            fill: new ol.style.Fill({
                color: 'green'
            })
        })
    });
    return [style];
}

getZoom((将地图的缩放级别返回为一个数字，您可以使用它，也可以对它进行转换，以适应所需的圆圈大小。

请注意，缩放级别越大，绘制的圆圈就越大，要进行相反操作，可以将值替换为：

yourMaxZoomLevel - map.getView().getZoom()

您也可以使用getResolution((，它也会返回一个数字