我有一个当前定义为样式的矢量图层:
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})
})
我希望半径根据 map 缩放级别动态变化 - 例如:
半径:(缩放/2)+1
我该怎么做?
更新: Jonatas 的评论帮助我朝着正确的方向前进。我最终使用了以下内容:
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);
});
最佳答案
您可以收听分辨率更改:
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);
});
请注意,我正在将分辨率转换为缩放,但这只是一种好奇。您可以摆脱它并根据分辨率设置半径。
关于openlayers-3 - ol3/Openlayers3 : change radius of circle when zoomed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31024715/