OL3/Openlayers3: изменения радиуса окружности при увеличении

Question

У меня есть векторный слой со стилем в настоящее время определяется как:

var styles = new ol.style.Style({ 
image: new ol.style.Circle({ 
    radius: 4, 
    fill: new ol.style.Fill({color: 'red'}), 
    stroke: new ol.style.Stroke({color: 'black', width: 1}) 
}) 

Я хочу, чтобы радиус динамически изменяться, основываясь на уровне масштабирования карты - что-то вроде:

радиус: (увеличение/2) +1

Как бы я идти об этом?

ОБНОВЛЕНИЕ: Комментарий Джонатаса помог мне направить меня в правильном направлении. Я закончил с использованием следующих:

map.getView().on('change:resolution', function(evt) { 
    var zoom = map.getView().getZoom(); 
    var radius = zoom/2 + 1; 

    var newStyle = new ol.style.Style({ 
     image: new ol.style.Circle({ 
     radius: radius, 
     fill: new ol.style.Fill({color: 'red'}), 
     stroke: new ol.style.Stroke({color: 'black', width: 1}) 
    }) 
    }) 
    vectorLayer.setStyle(newStyle); 
}); 

Answer 1

Вы можете прослушать изменения разрешения:

map.getView().on('change:resolution', function(evt){ 
    //according to http://openlayers.org/en/v3.6.0/apidoc/ol.View.html 
    // I think this is not true for any scenario 
    //40075016.68557849/256/Math.pow(2, 28) = 0.0005831682455839253 

    var resolution = evt.target.get(evt.key), 
     resolution_constant = 40075016.68557849, 
     tile_pixel = 256; 

    var result_resol_const_tile_px = resolution_constant/tile_pixel/resolution; 

    var currentZoom = Math.log(result_resol_const_tile_px)/Math.log(2); 
    console.info(currentZoom, resolution); 

    //now find your features and apply radius 
    feature.getStyle().getGeometry().setRadius(radius); 
}); 

Обратите внимание, что я преобразовывая разрешение, чтобы увеличить, но это просто любопытство. Вы можете избавиться от него и установить радиус на основе разрешения.

Answer 2

Используйте масштабную шкалу для изменения размера радиуса при увеличении.

map.getCurrentScale = function() { 
     //var map = this.getMap(); 
     var map = this; 
     var view = map.getView(); 
     var resolution = view.getResolution(); 
     var units = map.getView().getProjection().getUnits(); 
     var dpi = 25.4/0.28; 
     var mpu = ol.proj.METERS_PER_UNIT[units]; 
     var scale = resolution * mpu * 39.37 * dpi; 
     return scale; 

    }; 
map.getView().on('change:resolution', function(evt){ 

    var divScale = 60;// to adjusting 
    var radius = map.getCurrentScale()/divScale; 
    feature.getStyle().getGeometry().setRadius(radius); 
});