我想将地图范围限制为地图的初始范围,并限制用户在一定程度上进行平移。
我试过以下但没有改变:
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)}
});
答案 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/