地图框调整大小

Question

我正在尝试在调整地图容器的大小后调整地图的大小。调用invalidateSize()后地图没有调整。在此示例中，我希望地图缩小到新的容器大小。我用 Angular:

做了一个简单的测试用例

Index.html:

<div class="container-fluid" ng-controller="testCtrl">
    <div class="row">
        <div class="col-xs-12" ng-class="{'smaller': timedOut}">
            <mapbox map-id="jonfor.cifpucu09j2jos4m7h7dts4ek"></mapbox>
        </div>
    </div>
</div>

Controller.js:

testController.controller('testCtrl', ['$scope', 'mapboxService', '$timeout', function ($scope, mapboxService, $timeout) {
    mapboxService.init({accessToken:'pk.eyJ1Ijoiam9uZm9yIiwiYSI6ImNpZnB1Y3Y0OGh0NnJyN2x4OHFqNzdoajUifQ.vg3xNMJH-RgzRAZF7RzhzQ'});
    $timeout(function() {
        $scope.timedOut = true;
        var map = mapboxService.getMapInstances()[0];
        map.invalidateSize();
        console.log("Timeout");
    }, 3000);
}]);

App.css:

.smaller {
    width : 100px;
}

我也把这个项目放在 GitHub: https://github.com/Jonfor/MapBoxTest

Answer 1

编辑：

Angular Mapbox Directive that you use instantiates the map with a default width of 500px 如果最初未指定宽度（通过属性 width="100"）。

你可以通过指定width="dummyValue"来欺骗它，这样它就不会在地图容器上设置硬宽度，后者可以随其父容器宽度调整，包括你以后修改它时通过CSS class.

此外：

在更改宽度之前您应该阅读之前的地图边界。
您必须使用嵌套超时来为添加的 CSS class 留出一些时间才能在您的父容器宽度上生效（可能需要重新流动），然后再调用 invalidateSize() 和 fitBounds() 方法。

HTML:

<mapbox map-id="jonfor.cifpucu09j2jos4m7h7dts4ek" width="dummyValue">
</mapbox>

JavaScript:

$timeout(function() {
    //$scope.timedOut = true;
    var map = mapboxService.getMapInstances()[0];
    var bounds = map.getBounds();
    $scope.timedOut = true;

    $timeout(function () {
      map.invalidateSize();
      map.fitBounds(bounds);
    }, 0);

    console.log("Timeout");
}, 2000);

已将您的代码复制到 Plunker 并实施修改：https://plnkr.co/edit/S91zxHYIxnZ72bSwyxXs?p=preview（使用 https 让您满意！:-)）

原回答：

我假设您希望地图调整其缩放级别，以便在调整容器大小后可以看到相同的内容？

这样的话，你可以在调用map.invalidateSize()之前记住map.getBounds()，然后请求map.fitBounds()将其调整为之前的内容。

演示：http://jsfiddle.net/ve2huzxw/3/

fitBounds 方法将尽最大努力让相同的内容至少可见。如果新的容器比例不同，也会看到更多的区域。并且因为它必须使用整数缩放级别，它可能必须比需要的缩小更多（如果缩小容器），或者根本不放大（如果仅在一个维度上扩展容器）。

郑重声明，map.invalidateSize() 只是一个实用程序，让 Leaflet 考虑新的容器大小来加载图块（它不会加载距离容器内部太远的图块）和矢量绘图等等。它不会在视觉上改变任何其他东西。尝试增加容器大小 而无需为此函数调用 并查看 "empty" 区域。

地图框调整大小

Mapbox resizing

angularjs

leaflet

mapbox