openlayers-3 - OpenLayers 3 显示/隐藏图层

Question

我正在创建一个应用程序，它使用由 OpenLayers 3 库创建和管理的 map 。我希望能够使用缩放级别切换可见的图层(即缩小以获取国家概览，放大以获取城市概览)。图层分为三类(3 种不同的缩放级别)，在每个类别中，我使用的图钉可能有 3 种颜色(它们也是单独的图层)，因此总共有 9 层。

我想要的是开发过滤显示哪些层的能力，这意味着根据我们所处的缩放级别显示/隐藏现有层。

有一些代码可以演示如何生成 map 以及如何生成一种类型的图层，但如果需要更多详细信息，请告诉我。不过，我认为这不会有问题。

function setUpMap(vectorLayers, $scope){

    var view = new ol.View({
        center: ol.proj.fromLonLat([2.808981, 46.609599]),
        zoom: 4
      });

    map = new ol.Map({
       target: 'map',
       layers: vectorLayers,
       overlays: [overlay],
       view: view
     });

    view.on("change:resolution", function(e){
        var oldValue = e.oldValue;
        var newValue = e.target.get(e.key);
        if (newValue > 35000){
            if (oldValue < 35000)
                //This is where I will show group 1
        } else if (newValue > 10000){
            if (oldValue < 10000 || oldValue > 35000)
                //This is where I will show group 2
        } else {
            if (oldValue > 10000)
                //This is where I will show group 3
        }
    });

    addClickEventsToMapItems($scope);

}

我试过类似的东西，但没有成功:

function showLayer(whichLayer){
    vectorLayers[1].setVisibility(false);
    vectorLayers[2].setVisibility(false);
    vectorLayers[3].setVisibility(false);
    vectorLayers[whichLayer].setVisibility(true);
}

我愿意接受建议。请告诉我! :)

Answer 1

您可以在 ol.Map 实例上监听 resolution:change 事件:

map.getView().on('change:resolution', function (e) {
   if (map.getView().getZoom() > 0) {
       vector.setVisible(true);
   }
   if (map.getView().getZoom() > 1) {
       vector.setVisible(false);
   }
});

Plunker 示例:http://plnkr.co/edit/szSCMh6raZfHi9s6vzQX?p=preview

还值得看一下ol.layer 的minResolution 和maxResolution 选项，它们可以自动为您切换。但它通过使用 View 的分辨率而不是缩放因子来工作:

http://openlayers.org/en/v3.2.1/examples/min-max-resolution.html