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

我想我已经发现这是一个需要“关闭”的典型问题。但是，我还不知道如何做到这一点。

以下（愚蠢的）解决方法仅适用于给定数量的地图并产生许多冗余代码行，这只是一个临时解决方案：

// 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

问题在于，处理程序是在 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);   
}

见小提琴：http://jsfiddle.net/Kenny806/v5k97oye/

希望对你有帮助

Answer 2

ol.View 不会在singleclick 上触发事件。所以如果你要使用evt.coordinate，你需要确保你得到的是ol.MapBroswerEvent。

尚不清楚您的 ol.Maps 数组来自何处，但是一旦您将地图放入数组中，（出现）循环应写为：

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

希望对您有所帮助。