【03】openlayers 地圖事件

綁定事件：map.on(type, listener)

取消綁定：map.un(type, listener)

type:事件類型

listener：執行得函數體

事件類型：

//事件類型
let type = {
    click:'click',//單擊
    dblclick:'dblclick',//雙擊，雙擊會觸發click
    singleclick:'singleclick',//單擊，延遲250毫秒，就算雙擊不會觸發
    moveend:'moveend',//鼠標滾動事件
    pointermove:'pointermove',//鼠標移動事件
    pointerdrag:'pointerdrag',//鼠標拖動事件
    precompose:'precompose',//地圖准備渲染，為渲染
    postcompose:'postcompose',//地圖渲染中
    postrender:'postrender',//地圖渲染全部結束
    changeLayerGroup:'change:layerGroup',//地圖圖層增刪時觸發
    changeSize:'change:size',//地圖窗口發生變化就會觸發
    changeTarget:'change:target',//地圖綁定的div發生更改時觸發
    changeView:'change:view',//地圖view對象發生變化觸發
    propertychange:'propertychange',//Map對象中任意的property值改變時觸發
}

例子：

//綁定事件
let fn = function(e){
    console.log(e)
}
map.on(type.click,fn)

//取消綁定
setTimeout(()=>{
    map.un(type.click,fn)
},3000)

通常結合使用的方法：

map.forEachFeatureAtPixel(pixel, callback)

map.on('click',function(e){
    //屏幕坐標
    let pixel = this.map.getEventPixel(e.originalEvent);
    //檢測與視口上的像素相交的要素
    map.forEachFeatureAtPixel(pixel,function(feature,layers){
        //feature,返回的要素
        console.log(feature)
        //layers，返回的圖層
        console.log(layers)
    })
})