admin管理员组文章数量:1650766
ol3提供了鼠标在feature上的鼠标移入事件,但是并没有提供移出事件所以移出事件是要自定义的,具体思路如下:
1、绘制一个点、线、面的时候会得到一个feature对象使用这个feauture对象注册mousein监听
obj_feature.on('mousein',function (event) { //=====写自己想做事 })
2、监听地图上的鼠标移动事件:
map.on('pointermove', function (e) { var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); //=====获取到当前像素下的feature var feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) { return feature; }); //=====如果当前图层是指定的类型就标注为可点击状态 if (feature!=null&&typeof(feature)!="undefined"){ if (feature.get("type")==="click_stationPoint"){ //=====这里的overall_lastfeature是全局变量,对当前符合条件的feature赋值给这个全局变量方便后面做移出事件 overall_lastfeature=feature; //=====这里写自己鼠标移入时的样式或鼠标移入时的其他操作 //=====设置为手型表明可点击 map.getTargetElement().style.cursor = hit ? 'pointer' : ''; }else { map.getTargetElement().style.cursor = hit ? '' : ''; } }else { //=====敲黑板,划重点!!!!!这个overall_lastfeature是定义的一个全局变量,因为这里的判断是鼠标在地图上移动都会触发这里,鼠标移入你指定的feature时会在上面的判断做相应的操作,鼠标移除后就会触发这里,所以就有了这个overall_lastfeature作为全局变量,在这里做移出操作, if (overall_lastfeature!=""&&overall_lastfeature!=null){ overall_lastfeature.dispatchEvent({type: 'mousein', event: event}); } map.getTargetElement().style.cursor = hit ? '' : ''; } });
需要注意的是:
1、需要有一个全局变量去记录你移入时候的feature是哪一个,否则后面的鼠标移出就没有操作的feature对象;
2、鼠标移出时的代码逻辑问题,为什么会写在最外层的的问题,因为写在里面的话在触发鼠标移入事件的同时也会触发鼠标移出事件,这里是真的很坑!我刚开始的思维一直以为是移入的时候使用overall_lastfeature.dispatchEvent({type: 'mousein', event: event});就会自动触发这个feature的移除事件!但其实并不是!!!在这饶了大半天,引以为戒啊!!!
版权声明:本文标题:openlayers3在地图上定义feature的鼠标移入移出事件 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729534594a1205253.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论