OpenLayers学习笔记（三）

OpenLayers学习笔记（三）

中级篇

点击地图，弹框显示点击位置经纬度

var map = new ol.Map({
    layers: [
         new ol.layer.Tile({
             source: new ol.source.OSM()
          })
    ],
    target: 'map',
    view: new ol.View({
    //这儿要注意坐标系的转换
        center: ol.proj.transform([116.403598,39.917553], 'EPSG:4326', 'EPSG:3857'),
        zoom: 10
    })
});
// 监听singleclick事件
map.on('singleclick', function(e){		
// 通过getEventCoordinate方法获取地理位置，再转换为wgs84坐标，并弹出对话框显示      alert(ol.proj.transform(map.getEventCoordinate(e.originalEvent), 'EPSG:3857', 'EPSG:4326'));
})

任意的事件应用的三个步骤

• 找准事件发送者，比如上面这个例子，map就是事件发送者。一般事件的发送者都是要交互的对象。
• 找准事件名称，比如上面例子中的singleclick，切忌不要随便想象，一定要参照API文档。
• 编写事件响应函数，在OpenLayers中，事件发送者都会有一个名字为on的函数，调用这个函数，就能监听指定的事件，响应函数listener具有一个参数event，这个event类就对应于API文档中事件名称后边括号里的类。

说明：

• 几乎OpenLayers 3中所有的类，都能监听事件和触发事件，它们都继承于类ol.Observable，这个类甚至是ol.Object的父类。 如此可见，OpenLayers在整个引擎中，是多么的依赖于事件通信。
• 而OpenLayers 3的整个事件机制，又是基于Google的Closure Library。

注销事件

// 创建事件监听器
var singleclickListener = function(event){
    // 在响应一次后，注销掉该监听器
    map.un('singleclick', singleclickListener);
};
map.on('singleclick', singleclickListener);

常用的监听事件

地图鼠标左键单击事件，对应的类为ol.Map，事件名为singleclick。
地图鼠标左键双击事件，对应的类为ol.Map，事件名为dblclick。
地图鼠标点击事件，对应的类为ol.Map，事件名为click。
地图鼠标移动事件，对应的类为ol.Map，事件名为pointermove。
地图鼠标拖拽事件，对应的类为ol.Map，事件名为pointerdrag。
地图移动事件，对应的类为ol.Map，事件名为moveend。

// 响应单击事件
map.on('singleclick', function(event){
     document.getElementById('info').innerHTML = '触发了ol.Map的单击事件：singleclick';
});

对应不同的监听事件，对应不同的事件名

自定义地图事件

为ol.Feature添加一个mouseover的事件，通过这个事件，就可以实现在鼠标移到Feature上时，改变它的样式

// 在原点处创建一个feature
var feature1 = new ol.Feature({
    geometry: new ol.geom.Point([0, 0])
});
// 并设置为半径为100像素的圆，用红色填充
feature1.setStyle(new ol.style.Style({
    image: new ol.style.Circle({
        radius: 100,
        fill: new ol.style.Fill({
            color: 'red'
        })
    })
}));
//......同样的方式创建feature2
// 创建地图
var map = new ol.Map({
    // 设置地图图层
    layers: [
        // 创建一个使用Open Street Map地图源的瓦片图层
        new ol.layer.Tile({source: new ol.source.OSM()}),
        // 把之前创建的feature1和feature2放在另一个层里，Vector可以用来放置features
        new ol.layer.Vector({source: new ol.source.Vector({
            features: [feature1, feature2]
        })})
    ],
    // 设置显示地图的视图
    view: new ol.View({
        center: [0, 0],    // 定义地图显示中心于经度0度，纬度0度处
        zoom: 2            // 并且定义地图显示层级为2
     }),
     // 让id为map的div作为地图的容器
     target: 'map'    
});

// 这段是注册监听事件的关键代码
// 为地图注册鼠标移动事件的监听
map.on('pointermove', function(event){
    map.forEachFeatureAtPixel(event.pixel, function(feature){
        // 为移动到的feature发送自定义的mousemove消息
        feature.dispatchEvent({type: 'mousemove', event: event});
    });
}); 

// 为feature1注册自定义事件mousemove的监听
feature1.on('mousemove', function(event){
    // 修改feature的样式为半径100像素的园，用黑色填充
    this.setStyle(new ol.style.Style({
        image: new ol.style.Circle({
            radius: 100,
            fill: new ol.style.Fill({
                color: 'black'
            })
        })
    }));
});
//同样的方式为feature2注册自定义事件mousemove的监听

dispatchEvent的参数具有type和event属性，查看API文档，发现参数类型为goog.events.EventLike。它其实用的是google的closure库来实现的，通过closure库的源码我们知道，派发的事件如果是一个对象，那么必须包含type属性，用于表示事件类型。其他的属性可以自由定义，比如此处定义了event属性，并设置对应的值，为的是让鼠标事件传递给feature1的监听函数。

dispatchEvent的参数会被原封不动的传递给事件响应函数，对应代码

feature1.on('mousemove', function(event){})

自定义事件的三件事：定义事件类型，派发事件，监听事件。

地图交互

Feature选取之选中样式

var layer2 = new ol.layer.Vector({
    source: new ol.source.Vector(),
    // 注意：把feature上的style，直接移到layer上，避免直接在feature上设置style
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
            fill: new ol.style.Fill({
                color: 'red'
            })
         })
    })
});
var map2 = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }), layer2],
    target: 'map2',
    view: new ol.View({
        center: ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'),
        zoom: 10
    })
});
// 在地图上添加一个圆
var circle2 = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([104, 30], 'EPSG:4326', 'EPSG:3857'))})
// 此处不再为feature设置style
layer2.getSource().addFeature(circle2);
// 添加一个用于选择Feature的交互方式
map2.addInteraction(new ol.interaction.Select({
    // 设置选中后的style
    style: new ol.style.Style({
         image: new ol.style.Circle({
             radius: 10,
             fill: new ol.style.Fill({
                 color: 'blue'
             })
        })
    })
 }));

Feature选取之条件过滤

涉及到选取，自然会有各种条件用于过滤，比如是鼠标左键单击，还是双击，是可以选取地图上的任意feature，还是某一类的feature。 对于这些需求，ol.interaction.Select都能满足。

改变默认的单击选取方式

默认情况下，是支持鼠标左键单击选取feature的，在地图上其他地方点击一下，就取消选取了。
现在修改为鼠标移动到feature上，就选取了。所以，现在鼠标移动feature时会改变feature的颜色，移开时会恢复原来的颜色。

// 添加一个用于选择Feature的交互方式
map2.addInteraction(new ol.interaction.Select({
    condition: ol.events.condition.pointerMove,//主要是这句
    // 设置选中后的style
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
            fill: new ol.style.Fill({
                color: 'blue'
            })
        })
    })
}));

直接对feature过滤

在一个用于选择Feature的交互方式的方法中，添加filter过滤

map2.addInteraction(new ol.interaction.Select({
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
            fill: new ol.style.Fill({
                color: 'blue'
            })
        })
    }),
    // 关键： 设置过了条件，可以用feature来写过滤，也可以用layer来写过滤
    filter: function(feature, layer){
        return layer === circleLayer;
    }
}));

取消feature选中

取消选中有两种方式， 一种是在界面上以交互的方式取消选中，一种是用代码的方式取消选中

交互方式取消选中

如果是采用的默认的方式选取feature，即使用鼠标左键单击feature就可选取。那么这种交互方式下，要取消选中，则只需要同样使用鼠标左键，在地图其他地方单击一下，就可取消选中。

如果采用的是自定义的方式选取feature，那么要取消选中，交互方式还是一样的，只要目标不再是已选中的feature就行，就能取消选中。 比如要素选取之条件过滤中，采用了自定义的鼠标移入feature就可选中，要取消选中，只需要把鼠标移出feature即可。

代码方式取消选中

// 添加一个用于选择Feature的交互方式
var clickSelect = new ol.interaction.Select({
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: 10,
            fill: new ol.style.Fill({
                color: 'blue'
            })
        })
    })
});
map.addInteraction(clickSelect);
// 取消选中
function unselectFeature() {
    clickSelect.getFeatures().clear();
    // 下面这样也是可以取消选中的，根据情况选择
    // map.removeInteraction(clickSelect);
}

参考博文: https://blog.csdn.net/MagicMHD/article/details/91372480
https://blog.csdn.net/MagicMHD/article/details/91382304