地图交互事件中主要涉及到点击、地图放大缩小、鼠标移动事件。

点击：比如在具体业务中需要点击地图的某个地方，需要或者点击的那个点的经纬度；或者点击已经存在的标注点后做一些操作。

地图放大缩小：比如在具体业务中，有A、B两个图层，需要在放大地图的时候达到一定层级显示A图层，缩小地图达到一定层级显示B图层。

鼠标移动事件：比如在具体业务中，鼠标移动到某个标注点的时候要展示一个弹框。

以上都是比较常见的业务需求，其他的都万变不离其宗。

地图点击事件

给地图对象注册一个点击事件 this.map.on('singleclick', event => {}

以下是注册点击事件完整代码，详细情况请看注释

this.map.on('singleclick', event => {
    let pixel = event.pixel  //pixel：点击的像素点
    //forEachFeatureAtPixel：map对象上的通过像素点获取标注点
    let feature = this.map.forEachFeatureAtPixel(pixel, feature => feature);
    if(feature){
        //如果feature存在，表示点击的是标注点
        //可以通过feature.get(属性值)来获取标注点自定义的一些属性，这些属性是在new Feature构造函数中设置的属性值
    }else{
        //如果feature不存在，表示点击的是地图的空白部分
        let coordinate = event.coordinate  //通过event.coordiante属性获取点击的地方的经纬度
地图的缩小放大时间
给地图对象注册一个缩放事件
this.map.on("moveend", event => {})
以下是注册缩放事件完整代码，详细情况请看注释
this.map.on("moveend", event => {
    //获取当前地图的缩放级别,可以根据这个级别判断做出一些操作
    let zoom = this.map.getView().getZoom();  
    //获取当前缩放层级下的extent边界，可以根据这个边界值获取这个边界里面的显示的标注点，即是获取当前屏幕内显示的标注点
    let extent = this.map.getView().calculateExtent(this.map.getSize());
    // getSource这个方法是挂载在图层对象上， 即new VectorLayer()构造函数生成的对象
    let features = this.cityLayers.getSource().getFeaturesInExtent(extent)
地图的移入移出事件
给地图对象注册一个移入移出事件
this.map.on("pointermove", event => {})
以下是注册移入移出事件完整代码，详细情况请看注释
this.map.on("pointermove", event => {
    let pixel = this.map.getEventPixel(event.originalEvent);
    // 当鼠标移动的时候，可能会移动到空白处，也可能是标注点，hasFeatureAtPixel方法可以判断
    // 是否是移动到标注点返回值是一个bool值，true： 移动到标注点，false：移动到空白处
    let hit = this.map.hasFeatureAtPixel(pixel);
    //获取鼠标移动到标注点的信息
    if(hit){  //这里加入判断，可以提高效率，因为forEachFeatureAtPixel方法会有计算过程，
        let feature = this.map.forEachFeatureAtPixel(event.pixel, feature => feature);
    KeepFing
        前端工程师