在某种程度上平移地图javascript API

时间:2014-03-18 18:13:30

标签: arcgis arcgis-js-api esri-maps

我想将地图范围限制为地图的初始范围,并限制用户在一定程度上进行平移。

我试过以下但没有改变:

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

3 个答案:

答案 0 :(得分: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。由你决定。

答案 1 :(得分:1)

看起来你的范围改变功能是将初始范围变量设置为映射当前范围,然后检查该范围是否包含当前范围中心点 - 当然它总是如此。

相反,在map变量的相同范围内声明initExtent。然后,更改on load事件以设置此全局范围变量而不是局部变量。在更改函数的范围内,不要更新initExtent的值,只需检查initExtent是否包含整个当前范围。

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

唯一的问题是这些技术会短暂地超出initExtent,但是一旦更改了扩展功能,就会将范围重新捕获。

答案 2 :(得分: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/