Question

我发布了this question来使用openlayers3在运行时更改maxZoom，这非常有效：

map.setView(new ol.View({
  zoom: 10,
  maxZoom: 17,
  minZoom: 10,
}));

但是，我试图使用angular-openlayers-directive和地图整合此解决方案正在消失。这是Plunker demo failing。我尝试创建新指令，但也没有用。

olData.getMap().then(function(map){
  map.setView(new ol.View({
    zoom: 11,
    maxZoom: 11,
    minZoom: 0,
  }));
});

有关如何整合此内容以及是否可以在Plunker演示中使用它的任何建议都会很棒。

Answer 1

请参阅ol.View对象

的文档

http://openlayers.org/en/v3.2.1/apidoc/ol.View.html

如果在创建ol.View对象时未提供中心选项，则将其视为undefined。如果其undefined则不会获取图层来源。在$scope.changeZoom()方法中心未定义，因为创建时未提供。由于此地图对象未正确加载。

<强>修正

olData.getMap().then(function(map){
   map.setView(new ol.View({
      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
      zoom: 11,
      maxZoom: 11,
      minZoom: 0,
   }));
});

我已经给出了一些随机坐标作为中心。请参阅工作插件代码here

Answer 2

我不完全确定为什么它们不一样（我没有调查你所说的普通ol3解决方案）但是在逐步完成ol-debug.js代码后，似乎它正在绘制一个空白框架，因为新的视图没有中心。

您可以使用现有视图的中心设置中心：

$scope.changeZoom = function () {
    olData.getMap().then(function (map) {
        newView = new ol.View({
            zoom: 5,
            maxZoom: 20,
            minZoom: 0,
        });
        newView.setCenter(map.getView().getCenter());
        map.setView(newView);
    });
};

这是一个working plunker *。

*我之前没有使用过plunker所以如果它不起作用请告诉我，我会再试一次！

将运行时中的maxZoom选项更改为angular-openlayers-directive中的ol.View

2 个答案: