OpenLayers笔记3：地图事件监听概述及部分简单应用_openlayer change:view

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

1.鼠标触发事件

click ：鼠标单击地图触发的事件（鼠标单击多少次地图，该事件就触发多少次）；
singleclick ：鼠标单击地图触发的事件（鼠标若在250ms内连续单击地图，则不会触发该事件）；
dbclick ：鼠标双击地图触发的事件（鼠标在250ms内单击两次地图）；
pointermove ：鼠标指针在地图上移动触发的事件；
pointerdrag ：鼠标按下拖动地图触发的事件；

2.地图移动事件

movestart ：地图开始移动时触发的事件（包括平移和缩放）；
moveend ：地图结束移动时触发的事件（包括平移和缩放）；

3.图层渲染事件

precompose ：一个图层渲染前触发的事件；
postcompose ：一个图层渲染时触发的事件；
postrender ：一个图层渲染完成后触发的事件；
（上述三个渲染事件的解释是我测试后得出的，与官方API的解释有所出入，如若有误还望指正。）
rendercomplete ：所有的渲染都完成后触发的事件（所有的图层、瓦片都完成了在当前视图的加载）；

4.change事件

change ：地图出现改变时触发的事件（改变可以是任何地图事件）；
change:layerGroup ：地图的图层发生改变时触发的事件（例如图层的增加、删除）；
change:size ：可供地图显示的窗口大小发生改变时触发的事件（例如将浏览器窗口缩小化）；
change:target ：地图所在div块发生改变时触发的事件（例如切换地图的显示位置）；
change:view ：地图视图发生改变时触发的事件（例如视图中心的变化）；

5.其它事件

propertychange ：地图属性更改时触发的事件；
error ：地图运行发生错误时触发事件；

地图事件监听的部分简单应用

监听鼠标触发获取地图坐标

map.on('click', function (evt) {
    var pixel = map.getEventPixel(evt.originalEvent);//获取点击的像素点
    var coordinate = map.getCoordinateFromPixel(pixel);//获取像素点的坐标
    alert(coordinate);
});
监听指针移动获取指针位置矢量要素的属性值
 
map.on('pointermove', function (evt) {
    var pixel = map.getEventPixel(evt.originalEvent);//获取指针所在的像素点
    var feature;
    if (map.hasFeatureAtPixel(pixel))//判断像素点的位置是否有矢量要素
        //获取位于像素点位置的矢量要素
        feature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
            return feature;
        });
        console.log(feature.get("name"))；//获取矢量要素的某个属性值并打印
});
监听地图移动实现图层的动态显隐
 
map.on("moveend",function(evt){
    var zoom = map.getView().getZoom();//获取地图视图的缩放级别
    if (zoom >= 12) {
        layer1.setVisible(false);//设置图层可见性
        layer2.setVisible(true);
    } else {
        layer1.setVisible(true);
        layer2.setVisible(false);
});  
                                    OpenLayers是一个用于开发WebGIS客户端的JavaScript包，为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，主要还是以面向对象进行开发的。
<html xmlns=http://www.w3.org/1999/xhtml>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
const targetNode = document.getElementById('js-toc');
// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };
// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
	// Use traditional 'for lo
                                    openlayers是一个开源免费的js库，用于在网页中实现地图的动态显示和交互。一起看看官方对openlayers的介绍。
OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector
data and marker...