在一定程度上平移映射javascript

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事件以设置这个全局范围变量，而不是一个局部变量。在区段更改函数中，不要更新initExtent的值，只需检查initExtent包含整个当前区段。

或者，您可以将当前范围的每个界限与initExtent的每个界限进行比较，例如is initExtent.xmin < map.extent.xmin，如果有，则创建一个新的区段，将超出的范围设置为initExtent值。

唯一的问题是，这些技术将允许短暂地超出initExtent，但一旦范围更改函数触发并赶上，就会将范围恢复回原来的范围。

Answer 3

我最初在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/