Openlayers 3:使用for循环将点击事件绑定到多个地图
Openlayers 3: Binding click event to several maps using a for loop
如果能提供一点帮助,我将不胜感激。现在我正在学习 Openlayers 3。我想将一个点击事件绑定到一个 for 循环中的几个地图对象。
当我这样做时,事件仅应用于 for 循环中的最后一个地图对象:
for(var i = 0; i < $('.easymap').length;i++) {
// [...]
var elem = map[i];
elem.on('singleclick',function(evt){
elem.getView().setCenter(evt.coordinate);
});
}
我想我已经发现这是一个需要 "closure" 的典型问题。但是,我还没有找到如何做到这一点。
以下(愚蠢的)解决方法仅适用于给定数量的地图并产生许多行冗余代码,只是一个临时解决方案:
// solve later (make dynamic, learn how to use closures... )
if($('#easymap1').length && $('#easymap1').hasClass('addpost')) map[0].on('singleclick',function(evt){ /*alert(ol.coordinate.format(evt.coordinate, '{x}')+' '+ol.coordinate.format(evt.coordinate, '{y}'));*/ map[0].getView().setCenter(evt.coordinate); });
if($('#easymap2').length && $('#easymap2').hasClass('addpost')) map[1].on('singleclick',function(evt){ map[1].getView().setCenter(evt.coordinate); });
if($('#easymap3').length && $('#easymap3').hasClass('addpost')) map[2].on('singleclick',function(evt){ map[2].getView().setCenter(evt.coordinate); });
if($('#easymap4').length && $('#easymap4').hasClass('addpost')) map[3].on('singleclick',function(evt){ map[3].getView().setCenter(evt.coordinate); });
if($('#easymap5').length && $('#easymap5').hasClass('addpost')) map[4].on('singleclick',function(evt){ map[4].getView().setCenter(evt.coordinate); });
那么,谁能告诉我如何将其集成到合适的 for 循环中?谢谢。
此致
乔斯奇81
ol.View
won't fire events on singleclick
. so if you're going to use evt.coordinate
you need to be sure you're getting an ol.MapBroswerEvent
。
不清楚您的 ol.Map
数组来自何处,但是一旦您将地图放入数组中,(看起来)循环应写为:
for (var i = 0; i < mapArray.length; i++) {
var targetMap = mapArray[i];
targetMap.on('singleclick',function(evt){
// this event is sent by the map
targetMap.getView().setCenter(evt.coordinate);
});
}
希望对您有所帮助。
问题是,处理程序是在 for 循环的每次迭代中创建的,这意味着在最后一次迭代中,处理程序对 elem 的引用对应于最后一个映射。因此,即使通过单击另一个地图触发处理程序,它也会将中心设置为存储在变量 elem 中的地图。但是 singleclick 事件包含被点击的地图,所以你可以很容易地做到这一点:
for (var j = 0, jj = maps.length; j < jj; j++) {
var elem = maps[j];
elem.on('singleclick',function(evt){
evt.map.getView().setCenter(evt.coordinate);
});
}
或者,甚至更好(只定义一次处理程序):
var onMapClick = function(evt) {
evt.map.getView().setCenter(evt.coordinate);
}
for (var j = 0, jj = maps.length; j < jj; j++) {
var elem = maps[j];
elem.on('singleclick', onMapClick);
}
参见fiddle:http://jsfiddle.net/Kenny806/v5k97oye/
希望对您有所帮助
如果能提供一点帮助,我将不胜感激。现在我正在学习 Openlayers 3。我想将一个点击事件绑定到一个 for 循环中的几个地图对象。
当我这样做时,事件仅应用于 for 循环中的最后一个地图对象:
for(var i = 0; i < $('.easymap').length;i++) {
// [...]
var elem = map[i];
elem.on('singleclick',function(evt){
elem.getView().setCenter(evt.coordinate);
});
}
我想我已经发现这是一个需要 "closure" 的典型问题。但是,我还没有找到如何做到这一点。
以下(愚蠢的)解决方法仅适用于给定数量的地图并产生许多行冗余代码,只是一个临时解决方案:
// solve later (make dynamic, learn how to use closures... )
if($('#easymap1').length && $('#easymap1').hasClass('addpost')) map[0].on('singleclick',function(evt){ /*alert(ol.coordinate.format(evt.coordinate, '{x}')+' '+ol.coordinate.format(evt.coordinate, '{y}'));*/ map[0].getView().setCenter(evt.coordinate); });
if($('#easymap2').length && $('#easymap2').hasClass('addpost')) map[1].on('singleclick',function(evt){ map[1].getView().setCenter(evt.coordinate); });
if($('#easymap3').length && $('#easymap3').hasClass('addpost')) map[2].on('singleclick',function(evt){ map[2].getView().setCenter(evt.coordinate); });
if($('#easymap4').length && $('#easymap4').hasClass('addpost')) map[3].on('singleclick',function(evt){ map[3].getView().setCenter(evt.coordinate); });
if($('#easymap5').length && $('#easymap5').hasClass('addpost')) map[4].on('singleclick',function(evt){ map[4].getView().setCenter(evt.coordinate); });
那么,谁能告诉我如何将其集成到合适的 for 循环中?谢谢。
此致 乔斯奇81
ol.View
won't fire events on singleclick
. so if you're going to use evt.coordinate
you need to be sure you're getting an ol.MapBroswerEvent
。
不清楚您的 ol.Map
数组来自何处,但是一旦您将地图放入数组中,(看起来)循环应写为:
for (var i = 0; i < mapArray.length; i++) {
var targetMap = mapArray[i];
targetMap.on('singleclick',function(evt){
// this event is sent by the map
targetMap.getView().setCenter(evt.coordinate);
});
}
希望对您有所帮助。
问题是,处理程序是在 for 循环的每次迭代中创建的,这意味着在最后一次迭代中,处理程序对 elem 的引用对应于最后一个映射。因此,即使通过单击另一个地图触发处理程序,它也会将中心设置为存储在变量 elem 中的地图。但是 singleclick 事件包含被点击的地图,所以你可以很容易地做到这一点:
for (var j = 0, jj = maps.length; j < jj; j++) {
var elem = maps[j];
elem.on('singleclick',function(evt){
evt.map.getView().setCenter(evt.coordinate);
});
}
或者,甚至更好(只定义一次处理程序):
var onMapClick = function(evt) {
evt.map.getView().setCenter(evt.coordinate);
}
for (var j = 0, jj = maps.length; j < jj; j++) {
var elem = maps[j];
elem.on('singleclick', onMapClick);
}
参见fiddle:http://jsfiddle.net/Kenny806/v5k97oye/
希望对您有所帮助