Zoom de OpenLayers a una sección de 5x5 grados al hacer doble clic

Question

Aquí está la descripción de alto nivel de lo que estoy tratando de hacer. Cuando el usuario hace doble clic en el mapa, quiero que el mapa se amplíe a una cuadrícula de 5x5 grados alrededor del punto en el que ha hecho clic. En esencia, quiero codificar el zoom para que, independientemente del nivel de zoom en el que se encuentre, siempre se amplíe a 5x5 del punto en el que se ha hecho clic.

Estoy usando el OpenLayers 3.12.1, Angular 1.4.8, y mi propio servidor GeoServer.

Aquí está mi función de doble clic en mi aplicación Angular.

  $scope.map.on('dblclick', function(evt) {
    $scope.coordinate = evt.coordinate;
    $scope.center = ol.proj.transform($scope.coordinate, 'EPSG:3857', 'EPSG:4326');
    $scope.map = evt.map;
    $scope.extent = $scope.map.getView().calculateExtent($scope.map.getSize());
    $scope.bottomLeft = ol.proj.transform(ol.extent.getBottomLeft($scope.extent), 'EPSG:3857', 'EPSG:4326');
    $scope.topRight = ol.proj.transform(ol.extent.getTopRight($scope.extent), 'EPSG:3857', 'EPSG:4326');
    console.log('left', wrapLon($scope.bottomLeft[0]));
    console.log('bottom', $scope.bottomLeft[1]);
    console.log('right', wrapLon($scope.topRight[0]));
    console.log('top', $scope.topRight[1]);
    console.log($scope.center[0]);
    console.log($scope.center[1]);

    $scope.map.getview().fit($scope.extent, map.getSize());
});

Soy capaz de calcular el centro, calcular los puntos de borde de extensión. Sin embargo, cuando intento usar la función .fit, no importa lo que ponga en las entradas, la consola dice que esta función no existe. Sé que los parámetros que tengo ahí no son correctos en absoluto, son sólo marcadores de posición.

Sé que estoy calculando un montón de información superflua pero soy nuevo en OpenLayers y me guardo las líneas de código exitosas que tengo por ahora.

Answer 1

Bueno, lo he resuelto, probablemente todavía hay algunos cálculos extraños que voy a refactorizar más tarde, pero esto es lo que he resuelto:

$scope.map.on('dblclick', function(evt) {
  //Calculates center coordinates (lon,lat) in (-180,180) & (-90,90) form
  $scope.coordinate = evt.coordinate;
  $scope.center = ol.proj.transform($scope.coordinate, 'EPSG:3857', 'EPSG:4326');

  //Caputures the current and calculates the 4 edges of the extent
  //Calculate edge pairs to be able to apply the projection transform
  $scope.map = evt.map;
  $scope.extent = $scope.map.getView().calculateExtent($scope.map.getSize());
  $scope.bottomLeft = ol.proj.transform(ol.extent.getBottomLeft($scope.extent), 'EPSG:3857', 'EPSG:4326');
  $scope.topRight = ol.proj.transform(ol.extent.getTopRight($scope.extent), 'EPSG:3857', 'EPSG:4326');

  //Caculates the 5x5 degree edges of the new extent based on the center of the click
  $scope.bottomLeft = [wrapLon($scope.center[0]-2.5), $scope.center[1]-2.5];
  $scope.topRight = [wrapLon($scope.center[0]+2.5), $scope.center[1]+2.5];
  $scope.bottomLeft = ol.proj.transform($scope.bottomLeft, 'EPSG:4326', 'EPSG:3857');
  $scope.topRight = ol.proj.transform($scope.topRight, 'EPSG:4326', 'EPSG:3857');
  $scope.extent = [$scope.bottomLeft[0], $scope.bottomLeft[1], $scope.topRight[0], $scope.topRight[1]];

  //Applies the new extent to the map upon double click
  $scope.map.getView().fit($scope.extent, $scope.map.getSize());
});