Question

我有一个Openlayers 3地图，当用户重新调整浏览器大小时，应使用监视功能重新调整大小。当地图最初加载时，地图是垂直拉伸的，但是当我调整浏览器大小时，它是正确的。

当我最初检查canvas元素时，它显示：

<canvas class="ol-unselectable" style="width: 100%; height: 100%;" width="1090" height="550"></canvas>

然后在调整大小后它会响应正确的大小：

<canvas class="ol-unselectable" style="width: 100%; height: 100%;" width="1086" height="1004"></canvas>

我能找到的所有信息都指向调用map.updateSize（）;但这似乎不起作用，高度值似乎没有变化。任何帮助将不胜感激。

wmm.directive('tchOlMap', ['$window', function ($window) {

var MAP_DOM_ELEMENT_ID = 'tchMap';

return {
    //restrict: 'E',
    scope: false,
    //replace: true,

    template: '<div id="' + MAP_DOM_ELEMENT_ID +'" class="full-height" ng-style="mStyle"></div>',

    link: function postLink(scope, element, attrs) {
      scope.style = {};


      // these functions set the map and other divs to the size of the browser dynamically
      var w = angular.element($window);                

        scope.getWindowDimensions = function () {
        return { 'h': w.height(), 'w': w.width() };
        };


       scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {

        scope.mStyle = { 
                'height': (newValue.h - 102) + 'px',
                'width': '100%'
            };


             console.log('new height '+newValue.h);
           console.log('old height '+newValue.h);

           console.log(map.getSize());
           map.updateSize();

    }, true);

我尝试使用$ apply如下，但这不起作用

scope.$apply(function() {
                  map.updateSize(); 
               });

Answer 1

我刚刚解决了与您相似的案件。我的环境（package.json）：

"dependencies": {
  "@angular/animations": "6.1.1",
  "@angular/common": "6.1.1",
  "@angular/compiler": "6.1.1",
  "@angular/core": "6.1.1",
  "@angular/forms": "6.1.1",
  "@angular/http": "6.1.1",
  "@angular/platform-browser": "6.1.1",
  "@angular/platform-browser-dynamic": "6.1.1",
  "@angular/router": "6.1.1",
  "bootstrap": "^4.0.0",
  "core-js": "^2.4.1",
  "jquery": "^1.9.1",
  "moment": "^2.22.2",
  "moment-timezone": "^0.5.21",
  "ol": "^5.1.3",
  "ol-geocoder": "^3.2.0",
  "ol-layerswitcher": "git+https://github.com/walkermatt/ol-layerswitcher.git#ol5",
  "popper.js": "^1.14.3",
  "rxjs": "^6.2.2",
  "zone.js": "^0.8.26"
}

我制作了实现“ DoCheck”的组件：

在组件中导入“ DoCheck”

import {DoCheck} from '@angular/core';

在组件中实施“ ngDoCheck”方法

正式定义（https://angular.io/guide/lifecycle-hooks）：

检测并执行Angular无法或无法自行检测到的更改并采取措施。在每次更改检测运行期间ngOnChanges（）和ngOnInit（）之后立即调用。

对于我来说，我需要它在首次加载地图并通过在右侧添加另一个面板来拆分页面时更新地图大小。

ngDoCheck() { this.map.updateSize();}

对于您的情况，您可能可以在控制器（未测试）中以这种方式进行操作：

this.$doCheck = function() { map.updateSize(); };

https://docs.angularjs.org/guide/component

Answer 2

使用以下代码。我们在setTimeout（）函数中调用map.updateSize（）函数，值为200ms。加载此脚本后，map.updateSize（）将在200ms后执行，您的地图将在浏览器上加载

window.onload = function（）{setTimeout（function（）{map.updateSize（）;}，200）; }

Angular js从watch函数调整Openlayers 3 map的大小

2 个答案: