根据开放层重新调整框的大小 3 地图缩放

Question

我是第 3 层 api 的新手，我有一个疑问：我标记了一些位置和自定义信息 window，单击这些标记即可打开。请找 fiddle here

var map = new ol.Map({
target: 'map',
view: new ol.View({
    center: ol.proj.fromLonLat([78, 21]),
    zoom: 2
}),
layers: [
new ol.layer.Tile({
    source: new ol.source.MapQuest({
        layer: 'osm'
    })
})]

});

是否可以在使用鼠标滚轮放大和缩小地图时重新调整框的大小。我计划标记更多的城市，并在单击每个标记时绘制框，这些框应该默认打开，这样它就会覆盖整个地图。我可以根据缩放级别更改框大小吗？还有哪一层要设置地图，没有任何详细信息，如机场、道路等。我希望地图具有基本的极简主义图层，只有国家边界和城市名称。

谢谢

Answer 1

您可以监听视图 change:resolution 事件并使用缩放级别使框变大。这是一个例子：

var view = new ol.View({
    center: ol.proj.fromLonLat([78, 21])
});

var parentZoom = null;

view.on('change:resolution', function() {
    var zoom = view.getZoom();
    if (parentZoom !== null) {
        $('#zoom').text([
            'Parent zoom:',
            parentZoom,
            ', Current zoom:',
            zoom
        ].join(' '));
    }
    var width = 50 + (zoom * 10);
    var height = 30 + (zoom * 10);
    $('.mapDivs').width(width + 'px').height(height + 'px');
    parentZoom = zoom;
}, this);

view.setZoom(2);

在 JSFiddle 上实时查看（您的示例使用上述代码更新）：http://jsfiddle.net/pe7hyr0x/15/

根据开放层重新调整框的大小 3 地图缩放

Re sizing the box based on open layers 3 map zoom

openlayers-3