Question

我正在创建一个应用程序，它利用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);

}

我尝试过这样的事情并没有成功：

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

我愿意接受建议。请告诉我！：）

Answer 1

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

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

同样值得一看minResolution和maxResolution ol.layer选项，它们可以自动切换。但它使用视图的分辨率，而不是缩放因子：

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

Answer 2

为什么在向量层初始化期间不使用minResolution / maxResolution参数，请检查api here 如果您不知道分辨率，但只知道比例，请使用以下函数从分辨率中获得分辨率

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

OpenLayers 3显示/隐藏图层

2 个答案: