OpenLayers学习笔记中级篇（六、地图交互）

最新推荐文章于 2026-03-22 00:35:41 发布
原创 最新推荐文章于 2026-03-22 00:35:41 发布 · 1.4k 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了OpenLayers中如何进行地图交互，包括Feature的选中样式、条件过滤，以及如何取消选中。通过示例展示了如何自定义鼠标事件触发选取，并提供了代码方式取消选中的方法。文章最后鼓励读者掌握这些技能并应用于实践。

1、Feature选取之选中样式

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

</html>

大家可以自己运行看一下效果！

2、Feature选取之条件过滤

涉及到选取，自然会有各种条件用于过滤，比如是鼠标左键单击，还是双击，是可以选取地图上的任意feature，还是某一类的feature。 对于这些需求，ol.interaction.Select都能满足，在API的文档里面就有相关的参数设置，下面就是一些简单的使用示例。

一、改变默认的单击选取方式

默认情况下，是支持鼠标左键单击选取feature的，在地图上其他地方点击一下，就取消选取了，但这并不是定死的选取方式，你完全可以自定义。 比如鼠标移动到feature上，就选取了，试试：

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

</html>

大家可以测试一下，在我们把鼠标移动feature时会改变feature的颜色，移开时会回复原来的颜色！

二、我们也可以直接对feature过滤

<!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="map2" style="width: 100%"></div>
<script type="text/javascript">
    // 创建一个用于存放circle的layer
    var circleLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        })
    });

    // 创建一个用于存放star的layer
    var starLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            image: new ol.style.RegularShape({
                points: 5,
                radius1: 20,
                radius2: 10,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        })
    });

    var map2 = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }), 
          circleLayer, starLayer
        ],
        target: 'map2',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    // 在地图上添加一个圆
    var circle1 = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'))
    })
    circleLayer.getSource().addFeature(circle1);

    // 在地图上添加一个五星
    var star = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(
              [104.06, 30.05], 'EPSG:4326', 'EPSG:3857'))
    })
    starLayer.getSource().addFeature(star);

    // 添加一个用于选择Feature的交互方式
    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;
        }
    }));
</script>
</body>

</html>

先看一下效果：

我们只希望用户能选取圆形，而不能选取五星，而上面的功能完美契合！

3、取消feature选中

取消选中有两种方式， 一种是在界面上以交互的方式取消选中，一种是用代码的方式取消选中，下面就分别介绍一下：

交互方式取消选中

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

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

代码方式取消选中

<!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>
<input type="button" value="取消选中" onclick="unselectFeature();"></input>
<script type="text/javascript">
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        })
    });
    var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }), 
          layer
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    // 在地图上添加一个圆
    var circle = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'))
    })
    layer.getSource().addFeature(circle);

    // 添加一个用于选择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);
    }
</script>
</body>

</html>

大家可以测试一下，应该是没有问题的！至此，地图上元素的选取相关的知识点都介绍完毕，希望能逐个掌握并融会贯通于实际应用中。下一节我们来学习地图开发中常用的功能，也就是咱们的高级篇了，大家加油！

 

049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2816
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
vue+openlayers 实现hover效果弹框 或者 点击事件弹框
weixin_46262744的博客
04-21 5193
vue+openlayers 实现hover(pointermove )效果弹框 或者 点击(click)事件弹框、 首先先写个盒子 <div id="featureTiPing" v-drag></div> 布局样式 /* 新弹框*/ #featureTiPing { position: absolute; top: 10px; left: 50px; width: 287px; background-color: #000000; border-ra
Openlayers6 实战（一）天地图瓦片加载与多图层叠加
最新发布
weixin_30576827的博客
03-22 43
本文详细介绍了如何使用OpenLayers6实现天地图瓦片加载与多图层叠加的实战技巧。从开发环境搭建到瓦片服务解析，再到图层管理与性能优化，全面覆盖WebGIS开发中的关键技术点。特别针对天地图服务，提供了token申请、跨域处理等实用解决方案，帮助开发者快速构建高性能地图应用。
OpenLayers学习——Style及StyleMap（二）
GIS平台设计与开发
05-21 6408
参考官网例子，做一个随比例一起缩放的矢量符号的
openlayer 鼠标移动触发pointermove
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
06-18 1424
注意：因为是判断要素id是不是同一个，所以当再次触发同一个id也不会发起网络请求，所以这儿使用定时器，一定时间把oldMMsi置为null。
OpenLayers 3 事件应用
大树
01-25 2583
OpenLayers 3 事件应用 常用鼠标事件 地图鼠标左键单击事件 对应的类为ol.Map，事件名为singleclick。 地图鼠标左键双击事件 对应的类为ol.Map，事件名为dblclick。 地图鼠标点击事件 对应的类为ol.Map，事件名为click。 地图鼠标移动事件 对应的类为ol.Map，事件名为pointermove。 地图鼠标拖拽事件 对应的类为ol.Map，事件名为pointerdrag。
OpenLayers 3 之 地图交互功能（interaction）详解
热门推荐
研究与专注
05-21 3万+
地图交互功能和上一篇讲的地图控件有些混淆，它们都控制着用户与地图的交互，区别是地图控件的触发都是一些可见的 HTML 元素触发，如按钮、链接等；而交互功能都是一些设备行为触发，都是不可见的，如鼠标双击、滚轮滑动等，手机设备的手指缩放等。      地图的交互功能包含很多，如地图双击放大，鼠标滚轮缩放，矢量要素点选，地图上绘制图形等等。只要是涉及到与地图的交互，就会涉及到 intercation ...
OpenLayers基础教程——地图交互之绘制图形
HerryDong的博客
12-14 5674
1、前言 前面的博客其实已经介绍过了如何在openlayers中绘制图形，不过那是基于已有的坐标进行绘制。很多时候，用户往往需要使用鼠标自行在地图上进行图形绘制，这就涉及到了openlayers中的地图交互功能，下面开始介绍。 2、绘制基础图形 在openlayers中，实现地图交互的类是ol.interaction，默认情况下，openlayers只支持Point(点)、LineString(线)、Polygon(面)、Circle(圆)这四种基本图形。下面一段代码实现了这四种基本图形的绘制： <!
openlayers6【六】地图交互 interaction详解
@必意玲
05-27 6372
文章目录1. 什么是地图交互 interaction ？？？2. 简述地图交互 interaction3. interaction 介绍4. interaction defaults - 默认添加的交互功能5. 栗子：dragrotateandzoom (shift + 鼠标拖拽进行缩放和旋转地图)6. 写在最后 1. 什么是地图交互 interaction ？？？ 地图交互功能都是不可见的，如鼠标双击、滚轮滑动等，手机设备的手指缩放等。 地图的交互功能包含很多，如地图双击放大，鼠标滚轮缩放，矢量要素点选，
OpenLayers学习笔记中级篇（一、各种地图的加载）
MagicMHD的博客
06-09 4496
学习了前面的初级篇，相信大家对OplenLayers已经有了一个初步的认识，下面我们再继续深入学习OpenLayers的相关功能！ 我们这节主要是加载各种各样的地图，包括在线服务的地图，比如天地图、高德、OSM等，还有一些我们自己使用地图服务器发布的地图，比如使用Geoserver发布的wms地图服务，最后还介绍了常用矢量地图数据的加载，好了，让我们开始吧！ 首先我们再来深入学习一下Sourc...
OpenLayers笔记3：地图事件监听概述及部分简单应用
getMoreTime的博客
04-17 5771
目录地图事件监听概述1.鼠标触发事件2.地图移动事件3.图层渲染事件4.change事件5.其它事件地图事件监听的部分简单应用监听鼠标触发获取地图坐标监听指针移动获取指针位置矢量要素的属性值监听地图移动实现图层的动态显隐 地图事件监听概述 地图能够监听的事件主要包括： 1.鼠标触发事件 click：鼠标单击地图触发的事件（鼠标单击多少次地图，该事件就触发多少次）； singleclick：鼠标单击...
openlayers常用方法
ANNENBERG的博客
06-19 2622
openlayers中的一些方法；OpenLayers.Layer：；initialize：创建层Div，注册事件；destroy：注销；clone：克隆当前层；setName：设置层name；addOptions：添加附属属性；onMapResize：虚函数；redraw：重画；moveTo：移动；setMap：设置层所属的地图；removeMap：移除地 openlayers 中的一些方法 OpenLayers.Layer： initialize：创建层Div，注册事件 destroy：注.
【openlayers-4】事件
WXG1011的博客
12-30 2185
openlayers事件
vue3+ts openlayers 点击地图图标更换图标操作
M__O__M的博客
08-16 3051
vue3+ts openlayers 点击地图图标更换图标操作
openlayers中map事件基础认识与实践详解
whs15193553607的博客
06-30 1647
真正的单击事件，会延迟250毫秒以确保不是双击（所以双击时不会触发单击事件）。基本的地图点击事件，地图双击时也会触发2次，地图拖拽时不会触发。地图开始移动时触发，包括通过鼠标拖拽、键盘导航或动画引起的移动。地图移动结束时触发，包括通过鼠标拖拽、键盘导航或动画引起的移动。地图图层组发生变化时触发，如添加、删除或重新排序图层。双击地图事件，同时会触发两次地图单击事件click。地图视图对象（如中心点、缩放级别等）发生变化时触发。鼠标在地图上移动活动时触发该事件。鼠标在地图上拖拽时触发。
openlayers 仿CAD（2）
tvrddmss的专栏
06-20 429
openlayers 仿CAD
openlayers鼠标悬停,鼠标点击事件
qq_25064691的博客
04-24 3093
鼠标悬停 map.on('pointermove', function (e) { var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); map.getTargetElement().style.cursor = hit ? 'pointer' : ''; console.log(clickmeause) }) 鼠标点击 map.on('click',
openlayers鼠标经过要素高亮显示要素
weixin_44614518的博客
09-06 1458
openlayers鼠标经过要素高亮显示要素。
openlayers 根据style设置显示级别并在字体加背景框
dreamgis的专栏
09-24 2649
根据图层的属性字段设置图层显示级别 Iconstyle:function(feature,resolution) { var style = new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(241,242,236,0.8)', }), stroke : new ol.style.Stroke({ color : 'red', width : 2 }), image:new ol.style.Icon(({ offset: [0, 0]
OpenLayer学习之style样式的学习笔记
HPUGIS的博客
06-14 7510
前言：1. 可以配置的选项/** * @typedef {{geometry: (undefined|string|ol.geom.Geometry|ol.style.GeometryFunction), * fill: (ol.style.Fill|undefined), * image: (ol.style.Image|undefined), * stroke:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值