OpenLayers学习笔记中级篇（五、地图事件）

最新推荐文章于 2024-03-05 14:23:06 发布

MagicMHD

最新推荐文章于 2024-03-05 14:23:06 发布

阅读量3.4k

点赞数 6

分类专栏： OpenLayers WebGIS实战

本文链接：https://blog.csdn.net/MagicMHD/article/details/91372480

版权

事件让很多业务的东西串联在一起，在前端中起着非常重要的作用，比如鼠标点击，移动事件。但其应用远不仅如此，现实生活中就存在很多大大小小的事件。在OpenLayers 3中，同样存在非常多的事件，比如鼠标左键单击，双击等等。同时还有一些用于各个模块之间进行协作使用的事件，比如ol.Map的postrender和propertychange事件。通过这些事件，OpenLayers 3的功能模块协作一致，同样地，也可以让我们自己二次开发的功能模块运作起来。同时，根据需要，我们还可以在系统中新增自定义事件，使得我们的开发使用方式同OpenLayers 3更加的一致。在本章节将详细介绍OpenLayers 3中的各种事件，及相关应用。

首先我们先来一个简单的demo：

1、用鼠标点击下面这个地图，将弹出一个对话框，显示点击位置的经纬度：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>点击显示经纬度</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
    <div id="map" style="width: 100%"></div>
<script type="text/javascript">
    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'));
	
　　　　 
    })

</script>
</body>

</html>

运行一下看一下效果：

我们在点击地图的时候会弹出我们当前点击位置的经纬度！代码很简单，但需要注意的是，任意的事件应用，必然会有三个步骤：

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

最低0.47元/天解锁文章

MagicMHD

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
OpenLayers学习笔记中级篇（五、地图事件）

事件让很多业务的东西串联在一起，在前端中起着非常重要的作用，比如鼠标点击，移动事件。但其应用远不仅如此，现实生活中就存在很多大大小小的事件。在OpenLayers 3中，同样存在非常多的事件，比如鼠标左键单击，双击等等。同时还有一些用于各个模块之间进行协作使用的事件，比如ol.Map的postrender和propertychange事件。通过这些事件，OpenLayers 3的功能模块协作...
复制链接

扫一扫