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

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

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

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)}
    });

arcgis arcgis-js-api esri-maps
person John Macl    schedule 18.03.2014    source источник
comment
Я бы обновил заголовок вашего вопроса, чтобы лучше отразить ваш настоящий вопрос. Похоже, вы хотите вручную панорамировать карту, но вы действительно хотите ограничить возможность пользователя панорамировать карту.   -  person Aaron    schedule 18.03.2014
comment
Привет, Аарон, я протестировал ваш код по этой ссылке: jsfiddle.net/bbunker/JP565, но это продолжает бесконечный цикл в разделе if (outOfBounds). Как мне этого избежать?   -  person John Macl    schedule 22.03.2014
comment
Джон, мой подход был не совсем лучшим. Это не ограничивает панорамирование. Лучшим подходом было бы использовать эти свойства инициализатора, затем установить максимальный экстент, а в onExtentChanged карты убедиться, что экстент карты не вышел за пределы установленного вами максимума.   -  person Aaron    schedule 22.03.2014

Ответы (3)


arrow_upward
2
arrow_downward

Просто чтобы несколько конкретизировать ответ Саймона и привести пример. В идеале вам нужны две переменные из той же области, что и 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, если хотите захватить все. Вам решать.

person Juffy    schedule 19.03.2014
comment
Я использовал ваш подход, и он работает хорошо, кроме одного. Он бесконечно загружается после того, как кастрюля закончится. Как я могу решить эту проблему. - person John Macl; 20.03.2014
comment
Хммм ... Я не могу повторить это - мой запускает pan-end, серию pan, когда он возвращается к validExtent, затем еще pan-end. Проверено в IE9 и Chrome. - person Juffy; 21.03.2014

arrow_upward
1
arrow_downward

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

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

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

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

person Kate    schedule 18.03.2014

arrow_upward
0
arrow_downward

Первоначально я разместил это решение на gis.stackexchange в ответ на этот вопрос: https://gis.stackexchange.com/a/199366

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

//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/

person Chris    schedule 21.06.2016