OpenLayers3入门篇-单击事件
来源:互联网 发布:有安卓调音软件吗 编辑:程序博客网 时间:2024/05/21 17:58
单击事件的绑定
在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.Selectvar collection = arr.getFeatures();//获取这个事件绑定的features-->返回值是一个ol.Collection对象var features = collection.getArray();//获取这个集合的第一个元素-->真正的featureif(features.length>0){var obj = features[0].getId();//获取之前绑定的ID,返回是一个json字符串var jsonobj=eval("("+obj+")");//转成json对象alert(jsonobj.name);//获取ID 业务逻辑... }}
1 0
- OpenLayers3入门篇-单击事件
- OpenLayers3入门篇-右键事件的绑定
- OpenLayers3入门篇-创建地图
- OpenLayers3入门篇-创建点和线
- OpenLayers3入门篇-点的扩散效果
- Openlayers3事件体系详解
- OpenLayers3入门篇-点在线上的运动
- 单击事件
- OpenLayers3
- openlayers3
- ImageView单击事件、单击跳转
- OpenLayers3学习(二)--鼠标移动事件
- 一步一步学android之事件篇——单击事件
- 【入门】openlayers3官网例子解读
- gridview 双击单击事件
- 单击按钮右键事件
- list control单击事件
- DataGridViewButtonColumn添加单击事件
- LeetCode-96:Unique Binary Search Trees
- db2 存储过程及函数总结
- svn远程连接失败
- 63.Examine the values for the following initialization parameters: FAST_START_MTTR_TARGET = 0 LOG_CH
- <Entity Framework> - 直接执行数据库命令
- OpenLayers3入门篇-单击事件
- 移动端自适应
- 下拉刷新+加载更多的ListView(直接拿来用)
- Imgproc_3_图像变换
- jQuery函数attr()和prop()的区别
- JavaWeb登陆验证码
- Mac 终端自动补全忽略大小写
- LeetCode Valid Number(判断字符串是否是合法的数字表示 )
- 枚举类(2)