Openlayers 3：使用for循环将点击事件绑定到多个地图

Question

如果能提供一点帮助，我将不胜感激。现在我正在学习 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

Answer 1

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

希望对您有所帮助。

Answer 2

问题是，处理程序是在 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循环将点击事件绑定到多个地图

Openlayers 3: Binding click event to several maps using a for loop

jquery

for-loop

closures

openlayers

openlayers-3