Openlayers 3 OpenLayers 3显示/隐藏层

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

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

有一些代码来演示如何生成地图以及如何生成一种类型的图层，但如果需要更多详细信息，请让我知道。不过，我不认为这会有什么问题

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);

}

---

我愿意听取建议。请让我知道！：）

您可以在

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的示例：

还值得一看

ol.layer

的

minResolution

和

maxResolution

选项，它们可以为您自动切换。但它使用的是视图的分辨率，而不是zoomfactor：

---

为什么不在向量层初始化过程中使用

minResolution

/

maxResolution

参数，请检查api 如果您不知道分辨率，但只知道刻度，请使用以下函数从刻度中获取分辨率

function getResolutionFromScale(scale){
var dpi = 25.4 / 0.28;
var units = map.getView().getProjection().getUnits();
var mpu = ol.proj.METERS_PER_UNIT[units];
var res = scale / (mpu * 39.37 * dpi); 
return res;
}

---

我正在使用该功能，但它不起作用。。。vector.setVisible（true）不工作。不过，事件侦听器正在工作。正如您在示例中所看到的，它对我有效。也许您可以分享您如何定义层？

function getResolutionFromScale(scale){
var dpi = 25.4 / 0.28;
var units = map.getView().getProjection().getUnits();
var mpu = ol.proj.METERS_PER_UNIT[units];
var res = scale / (mpu * 39.37 * dpi); 
return res;
}