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

【问题标题】：Change maxZoom option in runtime to ol.View in angular-openlayers-directive将运行时中的 maxZoom 选项更改为 ol.View 在 angular-openlayers-directive
【发布时间】：2016-04-26 15:44:01
【问题描述】：

我发布了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 演示中工作的建议都会很棒。

【问题讨论】：

也许你在这里找到你需要的东西tombatossals/angular-openlayers-directive/examples

标签： javascript angularjs openlayers-3 angular-openlayers

【解决方案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,
   }));
});

我给出了一些随机坐标作为中心。查看工作 plunk 代码here

【讨论】：

【解决方案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，所以如果它不起作用，请告诉我，我会再试一次！

【讨论】：