OpenLayers3入门篇-单击事件

单击事件的绑定

在OpenLayers的官方API中有专门的事件函数（ol.interaction），对于事件的绑定也比较方便，但OL没有右键事件，绑定事件的对象是针对整个地图对象，对相应的地图层操作时需要对event对象深加工，需要进一步判断和提取对象。

第一步：

var selectClick = new ol.interaction.Select({
condition: ol.events.condition.click,
style:changeStyle
});

首先创建一个ol.interaction.Select对象,然后指定相应的参数，condition是事件类型，style是时间发生时相应的对象改变的Style,可以直接写在Style属性后面，也可以直接抽离成一个function，但是需要return ol.Style,如下

第二步：

var changeStyle = function(feature){
var ftype=feature.get("featuretype");
if(ftype=='line'){
return new ol.style.Style({
stroke:new ol.style.Stroke({
width:5,
color:'#9400D3'
})
});
}
};

注：在ol调用这个changeStyle函数的时候，会有一个默认的参数feature传入，在后期对于feature的判断会有很多，因为本身是对整个map做的事件绑定，并不是某一个layer,如果快速准确的判断featurn的类型，就必须先给featurn绑定相应数据，关于绑定数据和提取数据，会单独再介绍。

第三步：

map.addInteraction(selectClick);
selectClick.on("select",ClickEvent);

第一个addInteraction是将这个函数添加到map,单击时就只会有样式的改变，第二个是对这个函数功能的补充，单独再绑定一个选中事件，即单机事件发生的同时，也促发这个选中事件调用ClickEvent函数并传入event对象

代码如下：

function ClickEvent(e){
var arr=e.target;//获取事件对象，即产生这个事件的元素-->ol.interaction.Select
var collection = arr.getFeatures();//获取这个事件绑定的features-->返回值是一个ol.Collection对象
var features = collection.getArray();//获取这个集合的第一个元素-->真正的feature
if(features.length>0){
var obj = features[0].getId();//获取之前绑定的ID,返回是一个json字符串
var jsonobj=eval("("+obj+")");//转成json对象
alert(jsonobj.name);//获取ID
业务逻辑...
}
}