Предел панорамирования OpenLayers 5 - PullRequest
Новая
       7

Предел панорамирования OpenLayers 5

0 голосов
/ 06 февраля 2019

Я использую OpenLayers 5 для своего проекта и не смог найти здесь ничего для этого.В прошлом у OpenLayers было restrictExtent, но это, похоже, исчезло.Есть ли способ ограничить или ограничить способность пользователя выполнять вертикальное панорамирование, чтобы они не могли перетащить его за пределы экрана?

Я пытался использовать maxExtent как для слоя, содержащего карту, так и дляПредставление, и я смог ограничить то, что видно, сделав это в представлении.Однако я не смог ограничить панорамирование.Любая помощь с этим была бы потрясающей.

map.js 

componentDidMount() {
        BASE_VIEW.setMinZoom(this.getMinZoom());
        this.resize();
        this.map = new Map({
            controls: defaultControls().extend([MOUSE_POSITION_CONTROL]),
            layers: [BASE_LAYER],
            target: 'map',
            view: BASE_VIEW
        });
    }

map-constants.js 

const baseView = new View({
    center: fromLonLat(conus, projection),
    projection: projection,
    zoom: 4,
    extent: [Number.NEGATIVE_INFINITY, -43, Number.POSITIVE_INFINITY, 43]
});

1 Ответ

0 голосов
/ 06 февраля 2019

Ближайшим эквивалентом OpenLayers 2 restrictedExtent в OL3 + является ошибочно названный extent параметр ol.View, но это ограничение центра, которое ограничивает центр карты, и в зависимости от разрешения и размера карты можно выполнять панорамированиеграницы карты значительно превышают это значение.

Для репликации restrictedExtent вам потребуется пересчитать ограничение по центру и сбросить представление при изменении разрешения (игнорируя очень небольшие изменения, чтобы избежать проблем с производительностью).Предполагая, что вы открыли карту в необходимом максимальном экстенте (возможно, используя .fit()), вы можете использовать этот код 

var extent = map.getView().calculateExtent(); // opening coverage
var resolution = 0;

function resChange() {
    var newResolution = map.getView().getResolution();
    if (resolution == 0 || Math.abs((newResolution-resolution)/resolution) > 0.01) {
        resolution = newResolution;
        var width = map.getSize()[0] * resolution;
        var height = map.getSize()[1] * resolution;
        var view = new ol.View({
            projection: map.getView().getProjection(),
            extent: [extent[0]+(width/2), extent[1]+(height/2), extent[2]-(width/2), extent[3]-(height/2)],
            center: map.getView().getCenter(),
            resolution: resolution,
            maxZoom: map.getView().getMaxZoom(),
            minZoom: map.getView().getMinZoom()
        });
        view.on('change:resolution', resChange);
        map.setView(view);
    }
}
resChange();

Вот демонстрационная версия.Для эффективности я только сбрасываю вид при целочисленных уровнях масштабирования (в результате чего получается эффект растяжения и мгновенного возврата при уменьшении масштаба близко к краям), а для демонстрации, чтобы работать на полную страницу, я сбрасываю карту при изменении размера. 

var view = new ol.View();

var map = new ol.Map({
    layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ],
    target: 'map'
});

function openMap() {

    map.setView(view);
    var extent = ol.proj.transformExtent([ -2, 50.5, 2, 53], 'EPSG:4326', 'EPSG:3857');

    // fit the extent horizontally or vertically depending on screen size
    // to determine the maximum resolution possible
    var size = map.getSize();
    var width = ol.extent.getWidth(extent);
    var height = ol.extent.getHeight(extent);
    if (size[0]/size[1] > width/height) {
        view.fit([extent[0],(extent[1]+extent[3])/2,extent[2],(extent[1]+extent[3])/2], { constrainResolution: false });
    } else {
        view.fit([(extent[0]+extent[2])/2,extent[1],(extent[0]+extent[2])/2,extent[3]], { constrainResolution: false });
    }
    var maxResolution = view.getResolution();
    var resolution = 0;

    function resChange() {
        var oldView = map.getView();
        if (resolution == 0 || oldView.getZoom()%1 == 0) {
            resolution = oldView.getResolution();
            var width = map.getSize()[0] * resolution;
            var height = map.getSize()[1] * resolution;
            var newView = new ol.View({
                projection: oldView.getProjection(),
                extent: [extent[0]+(width/2), extent[1]+(height/2), extent[2]-(width/2), extent[3]-(height/2)],
                resolution: resolution,
                maxResolution: maxResolution,
                rotation: oldView.getRotation() 
            });
            newView.setCenter(newView.constrainCenter(oldView.getCenter()));
            newView.on('change:resolution', resChange);
            map.setView(newView);
        }
    }
    resChange();

}
map.on('change:size', openMap);
openMap();
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
...