2

我想将地图范围限制为地图的初始范围，并限制用户平移超过一定范围。

我尝试了以下但没有任何改变：

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

3 回答 3

2

只是为了充实西蒙的答案，并举个例子。理想情况下，您需要与以下相同范围内的两个变量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如果您想捕获所有内容，请使用。由你决定。

于 2014-03-19T00:40:57.510 回答
1

看起来您的范围更改功能正在将初始范围变量设置为地图当前范围，然后检查该范围是否包含当前范围中心点 - 当然它总是会。

相反，在映射变量的相同范围内声明 initExtent。然后，更改加载事件以设置此全局范围变量而不是局部变量。在extent changed函数中，不更新initExtent的值，只检查initExtent是否包含整个当前extent。

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

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

于 2014-03-18T23:08:39.070 回答
0

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

于 2016-06-21T20:33:03.147 回答