OpenLayers 3 事件应用

最新推荐文章于 2024-06-18 17:18:11 发布
最新推荐文章于 2024-06-18 17:18:11 发布
阅读量2.2k 收藏 6
点赞数 1
分类专栏： OpenLayers 3 文章标签： OpenLayers 3 事件处理 自定义事件 取消事件 事件交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43521890/article/details/122684705
版权

OpenLayers 3 事件应用

常用鼠标事件
    地图鼠标左键单击事件
    对应的类为ol.Map，事件名为singleclick。

    地图鼠标左键双击事件
    对应的类为ol.Map，事件名为dblclick。

    地图鼠标点击事件
    对应的类为ol.Map，事件名为click。

    地图鼠标移动事件
    对应的类为ol.Map，事件名为pointermove。

    地图鼠标拖拽事件
    对应的类为ol.Map，事件名为pointerdrag。

    地图移动事件
    对应的类为ol.Map，事件名为moveend。

一、简单事件应用：鼠标左键单击事件

1、项目结构

在这里插入图片描述

2、map.html
<!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>OpenLayers 3 :鼠标左键单击事件</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>

<script>

    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [

            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })

        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 0            // 设置地图显示层级为0
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });


    // 监听singleclick（鼠标左键单击）事件
    map.on('singleclick', function (event) {
        console.log("鼠标左键点击了")
    })

</script>
</body>
</html>
3、运行截图

在这里插入图片描述

二、事件注销

1、map2.html
<!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>OpenLayers 3 :事件注销</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>

<script>

    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [

            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })

        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 0            // 设置地图显示层级为0
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });


    
    // 监听dblclick（鼠标左键双击）事件
    var dblclickListener = function (event) {
        console.log("鼠标左键双击了")
        // 在响应一次后，注销dblclick事件监听
        map.un('dblclick', dblclickListener);
        console.log("dblclick事件注销")
    };
    map.on('dblclick', dblclickListener);


    // 监听pointerdrag(地图鼠标拖拽)事件
    // 使用once函数，只会响应一次事件，之后自动注销事件监听
    map.once('pointerdrag', function (event) {
        console.log("地图发生拖拽")
        console.log("pointerdrag事件注销")
    })


</script>
</body>
</html>
2、运行截图

在这里插入图片描述

三、常用事件

1、map3.html
<!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>OpenLayers 3 :常用事件</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>

<script>

    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [

            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })

        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 0            // 设置地图显示层级为0
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });

    // 响应单击事件
    map.on('singleclick', function (event) {
        console.log("触发了map的单击事件：singleclick")
    });

    // 响应双击事件
    map.on('dblclick', function (event) {
        console.log("触发了map的双击事件：dblclick")
    });

    // 响应点击事件
    map.on('click', function (event) {
        console.log("触发了map的点击事件：click")
    });

    //响应鼠标移动事件
    map.on('pointermove', function (event) {
        console.log("触发了map的鼠标移动事件：pointermove")
    });

    // 响应拖拽事件
    map.on('pointerdrag', function (event) {
        console.log("触发了map的拖拽事件：pointerdrag")
    });

    // 地图移动事件
    map.on('moveend', function (event) {
        console.log("触发了map的地图移动事件：moveend")
    });

</script>
</body>
</html>
2、运行截图

在这里插入图片描述

四、自定事件

1、map4.html
<!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>OpenLayers 3 :自定义事件</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>

<script>

    // 在原点处创建一个feature
    var feature = new ol.Feature({
        geometry: new ol.geom.Point([0, 0])
    });

    // 并设置为半径为100像素的圆，用红色填充
    feature.setStyle(new ol.style.Style({
        image: new ol.style.Circle({
            radius: 100,
            fill: new ol.style.Fill({
                color: 'red'
            })
        })
    }));


    /**
     *  创建地图
     */
    var map = new ol.Map({

        // 设置地图图层
        layers: [

            //创建一个使用Open Street Map地图源的图层
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            // 把创建的feature放到另一个图层里
            new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [feature]
                })
            })
        ],

        // 设置显示地图的视图
        view: new ol.View({
            center: [0, 0],       // 设置地图显示中心于经度0度，纬度0度处
            zoom: 0            // 设置地图显示层级为0
        }),

        // 让id为map的div作为地图的容器
        target: 'map'

    });


    // 为地图注册鼠标移动事件的监听
    map.on('pointermove', function (event) {
        //鼠标与feature交互
        if (map.hasFeatureAtPixel(event.pixel)) {
            map.forEachFeatureAtPixel(event.pixel, function (f) {
                //当鼠标为移入feature时，发送自定义的mousein消息
                if (f === feature){
                    f.dispatchEvent({type: 'mousein', event: event});
                    console.log("鼠标移入圆")
                }
            });
        } else {
            //鼠标与map交互
            //当鼠标为移出feature时，发送自定义的mousemove消息
            feature.dispatchEvent({type: 'mouseout', event: event});
            console.log("鼠标移出圆")
        }
    });


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


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

</script>
</body>
</html>
2、运行截图

在这里插入图片描述

大树下躲雨
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
OpenLayers入门，OpenLayers鼠标移动事件使用，实现鼠标移动到点位上方后高亮显示点位要素
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-29 1375
本章主要讲解OpenLayers鼠标移动事件的使用，并简单实现鼠标移动到点位上方后高亮显示点位要素的功能，带领大家快速上手OpenLayers鼠标移动事件的应用。
openlayers 鼠标点击交互事件
haochajin的博客
10-18 8864
目前，openlayers中利用ol.interaction.Select接口进行事件交互操作。在此接口中，有几个重要的参数说明如下： condition：表示鼠标事件类型，例如ol.events.condition.click表示单击事件（其他事件可参考api） style:可为style或function，其中为function时函数参数为feature； filter:function...
openlayer 鼠标移动触发pointermove
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
06-18 445
注意：因为是判断要素id是不是同一个，所以当再次触发同一个id也不会发起网络请求，所以这儿使用定时器，一定时间把oldMMsi置为null。
openlayers的鼠标滚轮事件
01-15
openlayers如何启用和禁用鼠标滚轮事件。
openlayers3 鼠标单击事件，图片随鼠标滚动缩放事件
leobbis的博客
07-24 2856
鼠标单击事件 map.on('singleclick',mapClick); function mapClick(e){          var pixel = map.getEventPixel(e.originalEvent);          featureInfo = map.forEachFeatureAtPixel(e.pixel, function(feature) {  ...
OpenLayers3学习(二)--鼠标移动事件
热门推荐
yizhi鬼的专栏
07-08 1万+
在Web地图应用开发过程中，最常见的事件之一就是使用鼠标在地图上移动，这里我们利用(一)中的地图服务，在此基础上创建一个鼠标移动的事件，代码如下： Tiled ArcGIS MapServer .map { width: 1000px; height: 700px; }
OpenLayers实战（二）地图常用事件
BigBanana的博客
09-17 2206
监听map常用事件 // ===== 事件类型 ===== 'click',// 单击 'dblclick',// 双击 'singleclick',// 单击，延迟250毫秒 'moveend',// 鼠标滚动事件 'pointermove',// 鼠标移动事件 'pointerdrag',// 鼠标拖动事件 'precompose',//地图准备渲染，为渲染 'postcompose',//地图渲染中 'postrende
openLayers3基本写法
08-31
OpenLayers 3 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。这个库提供了丰富的功能，包括地图的加载、图层管理、数据可视化、地理空间操作等。本篇文章将详细介绍OpenLayers 3的基本写法，...
openlayers3 热力图
06-30
OpenLayers 3 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式的地图应用。它支持多种地图服务，包括WMS、WMTS等，并且提供了丰富的地图操作和视觉效果，其中热力图就是一种非常实用的数据可视化工具。 ...
openlayers3+ 地图右键
07-16
在OpenLayers 3及以上版本中，地图右键功能的实现是一项关键操作，它允许用户与地图交互并执行特定任务，如获取地图上的坐标、测量距离、添加标记等。本篇文章将详细探讨如何在OpenLayers中自定义地图右键菜单，以...
OpenLayers3实现地图显示功能
10-14
然而，这只是基础，OpenLayers 3 还支持更多高级功能，如添加自定义图层、图层叠加、地理坐标转换、事件监听、自定义交互等。如果你想要创建更复杂的WebGIS应用，可以进一步学习OpenLayers 3 的API和文档，探索更多...
OpenLayers3实现鼠标移动显示坐标
10-14
主要为大家详细介绍了OpenLayers3实现鼠标移动显示坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers3要素移动交互并弹出要素信息
03-24
openlayers3中，显示点要素。当鼠标移动到要素上，高亮显示要素，并弹出要素信息。
OpenLayers3库
02-18
2. **ol.js**：这是OpenLayers3的核心JavaScript库文件，包含了处理地图操作、图层管理、投影转换、几何对象创建和编辑、事件处理等功能的所有代码。开发者可以通过引用这个文件，在网页中实例化地图对象，加载不同...
OpenLayers学习笔记中级篇（五、地图事件）
MagicMHD的博客
06-10 3448
事件让很多业务的东西串联在一起，在前端中起着非常重要的作用，比如鼠标点击，移动事件。但其应用远不仅如此，现实生活中就存在很多大大小小的事件。 在OpenLayers 3中，同样存在非常多的事件，比如鼠标左键单击，双击等等。 同时还有一些用于各个模块之间进行协作使用的事件，比如ol.Map的postrender和propertychange事件。 通过这些事件，OpenLayers 3的功能模块协作...
openlayers地图旋转_openlayers3---地图交互
weixin_33594621的博客
01-16 697
地图交互功能和上一篇讲的地图控件有些混淆，它们都控制着用户与地图的交互，区别是地图控件的触发都是一些可见的 HTML 元素触发，如按钮、链接等；而交互功能都是一些设备行为触发，都是不可见的，如鼠标双击、滚轮滑动等，手机设备的手指缩放等。 地图的交互功能包含很多，如地图双击放大，鼠标滚轮缩放，矢量要素点选，地图上绘制图形等等。只要是涉及到与地图的交互，就会涉及到intercation类，它定义...
OpenLayers基础教程——常用的地图事件
HerryDong的博客
10-14 5177
1、前言 前一篇博客介绍了事件的注册和取消注册，这篇博客就来介绍一下OpenLayers中常用的一些地图事件。 2、地图点击事件 地图点击事件如下所示： click——地图点击事件 singleclick——地图单击事件 dblclick——地图双击事件 测试代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>OpenLayers</tit
vue+openlayers，初始化openlayers地图，实现鼠标移入、点击、右键等事件
lyf_0907的博客
03-24 3783
主要功能：初始化openlayers地图，实现鼠标移入、点击、右键等事件，以及获取当前图标的feature，将当前图标信息以弹框方式进行展示；地图上展示拾取到的经纬度。步骤一：将地图的公用配置项单独提出成一个js文件，方便打包后进行修改。步骤二：初始化openlayers地图。前端使用的是vue技术栈。
Openlayers Map事件基础及重点内容讲解
大剑师兰特的GIS世界
07-10 762
Openlayers map事件是非常重要的交互，没有这些事件，地图存在的意义仅有2%。这些事件都有哪些呢，如何使用呢，我们实战中都有涉猎，一下为基础介绍和API详解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大树下躲雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值