Change maxZoom option in runtime to ol.View in ang

问题:

I posted this question to change maxZoom in runtime using openlayers3 and that works perfect:

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

However, im trying to integrate this solution using the angular-openlayers-directive and the map is disappearing. Here a Plunker demo failing. I tried creating new directive and also didn't work.

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

Any suggestions on how to integrate this and if you could make it work in the Plunker demo would be great.

回答1:

See the documentation of ol.View object

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

If center option is not given while creating ol.View object it is taken as undefined. If its undefined then layer sources will not be fetched..In $scope.changeZoom() method center was undefined since it was not provided while creating. Because of this map object was not loaded correctly.

Fix

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

I have given some random coordinates as center. See the working plunk code here

回答2:

I'm not entirely sure why they aren't the same (I didn't investigate the ordinary ol3 solution you stated) but after stepping through the ol-debug.js code it seems it's drawing a blank frame because the new view doesn't have a center.

You can set the center using the existing view's center:

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

And here's a working plunker*.

*I haven't used plunker before this so if it doesn't work let me know and I'll try again!