openlayers3在地图上定义feature的鼠标移入移出事件

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的移除事件!但其实并不是!!!在这饶了大半天,引以为戒啊!!!

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值