Панорамирование карты в определенной степени JavaScript API

Question

Я хочу ограничить экстент карты начальным экстентом карты и запретить пользователю панорамировать более определенного экстента.

Я попробовал следующее, но ничего не изменилось:

map = new Map( "map" , {
        basemap: "gray",    
        center: [-85.416, 49.000],
        zoom : 6,
        logo: false,
        sliderStyle: "small"
    });


    dojo.connect(map, "onExtentChange", function (){
    var initExtent = map.extent;
    var extent = map.extent.getCenter();
    if(initExtent.contains(extent)){}
    else{map.setExtent(initExtent)}
    });

Answer 1

Просто чтобы конкретизировать ответ Саймона и привести пример. В идеале вам нужны две переменные в той же области, что и map:

initExtent сохранить границу вашего действительного экстента, и

validExtent сохранить последний действительный экстент, найденный во время панорамирования, чтобы вы могли вернуться к нему.

Я использовал более новый dojo.on Синтаксис события также для этого примера, вероятно, это хорошая идея, чтобы перейти к этому согласно рекомендации документации - я предполагаю, что ESRI прекратит использование старого стиля в какой-то момент.

var map;
var validExtent;
var initExtent;

[...]

    require(['dojo/on'], function(on) {
        on(map, 'pan', function(evt) {
            if ( !initExtent.contains(evt.extent) ) {
                console.log('Outside bounds!');
            } else {
                console.log('Updated extent');
                validExtent = evt.extent;
            }
        });

        on(map, 'pan-end', function(evt) {
            if ( !initExtent.contains(evt.extent) ) {
                map.setExtent(validExtent);
            }
        });
    });

Вы можете сделать то же самое с событиями масштабирования или использовать extent-change если вы хотите поймать все в ловушку. Вам решать.

Answer 2

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

Вместо этого объявите initExtent в той же области видимости переменной карты. Затем измените событие on load, чтобы установить эту глобальную переменную области видимости, а не локальную переменную. В функции изменения экстента не обновляйте значение initExtent, просто проверьте, что initExtent содержит весь текущий экстент.

В качестве альтернативы вы можете сравнить каждую границу текущего экстента с каждой границей initExtent, например, является initExtent.xmin

Единственная проблема состоит в том, что эти методы позволят кратко превысить initExtent, но затем вернут экстент, как только функция, измененная экстентом, сработает и поймает.

Answer 3

Я первоначально разместил это решение на gis.stackexchange в ответ на этот вопрос: /questions/42386254/alfa-smeshenie-tsvetov-vnet-compact-framework-20/42386263#42386263

Вот пример кода из этого поста:

//This function limits the extent of the map to prevent users from scrolling 
//far away from the initial extent.
function limitMapExtent(map) {
    var initialExtent = map.extent;
    map.on('extent-change', function(event) {
        //If the map has moved to the point where it's center is 
        //outside the initial boundaries, then move it back to the 
        //edge where it moved out
        var currentCenter = map.extent.getCenter();
        if (!initialExtent.contains(currentCenter) && 
            event.delta.x !== 0 && event.delta.y !== 0) {

            var newCenter = map.extent.getCenter();

            //check each side of the initial extent and if the 
            //current center is outside that extent, 
            //set the new center to be on the edge that it went out on
            if (currentCenter.x < initialExtent.xmin) {
                newCenter.x = initialExtent.xmin;
            }
            if (currentCenter.x > initialExtent.xmax) {
                newCenter.x = initialExtent.xmax;
            }
            if (currentCenter.y < initialExtent.ymin) {
                newCenter.y = initialExtent.ymin;
            }
            if (currentCenter.y > initialExtent.ymax) {
                newCenter.y = initialExtent.ymax;
            }
            map.centerAt(newCenter);
        }
    });
}

А вот рабочий пример jsFiddle: http://jsfiddle.net/sirhcybe/aL1p24xy/