OpenLayers的点击事件

OpenLayers的点击事件是附加在整个ol.Map对象上的：

var selectSingleClick = new ol.interaction.Select();
map.addInteraction(selectSingleClick);
selectSingleClick.on('select', function(e) {
	var features = e.target.getFeatures().getArray();
	if(features.length > 0) {
		console.log(features[0].values_);
	}
});

点击事件是通过点击具体的Feature触发的，点击底图并不会触发点击事件。

点击事件触发后，就会执行上面的回调函数。可以在回调函数中执行需要进行的操作。

然而，该事件是针对整个ol.Map对象。所以对于不同的Feature，都会触发上面同一个回调。那么，若不同的Feature所需要的回调逻辑不同，这样就得做条件处理。

例如，点击一个点，弹窗提示点的位置；点击一个圆，弹窗提示圆的半径。

于是在上面的if条件中，就可以加个switch来判断当前点击的是点还是圆（例如通过id来判断），然后做对应的处理。

这样处理最为直观，但烦琐且工作量大。设区别图形是使用id，那么有一万个图形，switch中就需要出现一万个条件。于是考虑到，是否可以将点击图形的回调和参数传入，点击某个Feature，就触发该Feature自己的回调。

对于回调参数e，有个属性values_。该属性是定义Feature时传入的参数。

例如，定义点Feature：

new ol.Feature({
	geometry: new ol.geom.Point(coordinate)
})

打印点击事件的values_属性：

console.log(features[0].values_);

控制台会输出：

{
	geometry: {...}
}

也就是说，Feature创建时的参数会被放入values_属性中。所以在Feature创建时附加data参数：

new ol.Feature({
	geometry: new ol.geom.Point(coordinate),
	data: {
		callback: function(params) {
			console.log(params);
		},
		callbackParams: {}
	}
})

打印点击事件的values_属性：

{
	geometry: {...},
	data: {
		callback: function(params) {
			console.log(params);
		},
		callbackParams: {}
	}
}

所以，在处理Map的点击时：

selectSingleClick.on('select', function(e) {
	var features = e.target.getFeatures().getArray();
	if(features.length > 0) {
		var data = features[0].values_.data;
		if(data.callback) {
			data.callback(e, data.callbackParams);
		}
	}
});

这样，就会执行该Feature自己的回调函数。

转载自：https://blog.csdn.net/fyyyr/article/details/82588492