openlayer中自带的注册事件获取地图坐标的方法

最近遇到的需求中需要对openlayer地图的一些事件进行监听,然后传递到高德、百度等原生地图中。
这个需求是因为openlayer的访问的xyz方式地图比较陈旧,一些地铁、小区的线路不一致,还是旧版本。
这里给大家分享一个解决方案:
把原生地图与openlayer地图进行重叠,并透明化openlayer地图,再传递openlayer的事件到原生地图。

var _mapEvent = function(event) {
    mapEvent(event);
}
var openlayerMap = new ol.Map({
    layers: "定义的图层",
    loadTilesWhileInteracting: true,
    target: "目标div",
    view: new ol.View({
        center: point,
        zoom: 13
    })
});

// 地图移动、缩放事件
openlayerMap.on('moveend', _mapEvent);
// 响应拖拽事件
openlayerMap.on('pointerdrag', _mapEvent);
function mapEvent(event) {
    var coordinate=map.getEventCoordinate(event);
    var coordinate=event.target.focus_;
    if (event.type == "pointerdrag"){
        //拖拽地图平移
        
    }

    if (event.type == "moveend") {
        //缩放
        
    }
}

使用openlayer自带的注册事件函数ol.map.on(‘click’,function(e))时,map.getEventCoordinate(event),返回的x、y都是NaN。

然而使用js或jquery的事件监听$("#map").click(function (e)时,map.getEventCoordinate(event),虽然能够获取x、y的值,支持的事件只有鼠标点击、移入、移除、悬停等,无法满足地图的拖拽、缩放的事件。

通过控制台调试,发现event.target.focus_可以获取当前焦点坐标,x、y。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值