openlayers实现选择要素，并弹框显示选中要素的信息

最新推荐文章于 2024-05-11 22:00:00 发布
最新推荐文章于 2024-05-11 22:00:00 发布
阅读量1.1w 收藏 38
点赞数 6
分类专栏： Openlayers开发 文章标签： openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43310551/article/details/83378289
版权

openlayers中实现要素选择的类是ol.interaction.Select.首先实例化一个选择工具selectTool，并添加到地图上：在这里插入图片描述使用选择工具选中的要素，存储在选择工具的features属性中，这里的features,其实是openlayers的一个要素集合(ol.collection):在这里插入图片描述
选择的要素有默认样式，可以通过style属性改变选中要素的默认样式：在这里插入图片描述

要数选择工具添加到地图上默认就是激活的，可以通过setActive(boolean )方法设置工具是否激活。

通过this.selectTool的 "select"事件触发选中要素时的回调函数，在回调函数中可以得到当前选中的要素e.selected，获取选中要素的属性信息properties和当前鼠标单击的坐标信息coordinate。

获取到的属性信息和坐标信息，用于在创建ol.Overlay时使用，properties用于显示内容，coordinate用于设置overlay的位置,代码如下：

在创建选中要素信息弹出窗时，设置Overlay关联的元素是id为popups的元素（此元素默认是不显示的）。创建完成选中信息要素弹框时，再让overlay关联的元素显示出来。效果如下图：
在这里插入图片描述

为选中要素的信息弹窗的设置关闭方法，在让弹框关闭的同时，还要清除选中的要素（this.selectTool.features）。清除选中要素要使用this.selectTool的getFeatures()方法获取选中的要素集合(ol.collection)，再使用ol.collcetion的clear（）方法清除集合中的所有要素:
在这里插入图片描述

江南Code
关注
  • 6
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
vue-openlayers实现地图坐标弹框效果
10-14
在本文中，我们将深入探讨如何使用Vue框架与OpenLayers库结合来实现在地图上点击时显示坐标信息的弹框效果。Vue是一个流行的前端JavaScript框架，而OpenLayers则是一个功能强大的开源JavaScript库，用于创建交互式...
openlayers select 鼠标点击要素指定图层高亮
gis_sss的博客
10-10 4513
一、概述 使用openlayers点击要素高亮显示方法可以使用select来实现，对于一个页面显示多个图层如何进行指定图层进行高亮，其他图层不高亮，select也提供相应的方式 二、点击高亮的实现方法 （1）es6的方式按钮加载模块 import { Select } from "ol/interaction"; import { click } from "ol/events/condition"; （2）实现高亮 let selectClick = new Select({ .
超图 openlayers 图层点击事件 多图层时查询图层要素
weixin_60592115的博客
03-07 1938
0.001 : 0.05,//根据缩放程度进行缓冲区大小设置。color: "#3e84cf", //高亮区域的边界线颜色。// 需要查询数据的图层 添加事件。// 底图外的其他图层 添加事件。// 已显示图层 添加事件。
九、openlayers官网示例Box Selection解析——使用Select和DragBox选中矢量地块实现高亮并显示地块信息
最新发布
aaa_div的博客
05-11 829
接下来，添加选择器，select是在修改原有的feature的样式，所以这一步仍然需要动态设置每个feature的样式，这和利用点击事件拿取feature绘制新的高亮图层不同，使用点击事件绘制高亮效果是在原有的feature上面新建了一个图层新绘制了一个feature，设置feature的填充色位透明就可以刚好漏出来下面地块的颜色。同时，触发["add",]事件，将信息显示到页面上。获取 this.select上的所有feature，监听一个事件，方便把选中的feature上的信息实时显示到页面上。
ArcEngine二次开发_04（鼠标点击图层点显示属性（两个及以上））
MusicMan
03-12 3735
首先，这个功能之前有琢磨了一段时间，分享给大家，谢谢各位朋友们 private void mainMapControl_OnMouseDown(object sender, ESRI.ArcGIS.Controls.IMapControlEvents2_OnMouseDownEvent e) { if (mainMapControl.LayerCount ...
openlayer矢量查询并弹出框显示-基于overlay
~~
08-26 1759
效果图： 代码实现： <template> <div class="_leftTop"> <div id="map"></div> <div id="popup" class="olPopup"> <div style="text-align: right;"> <span @click="overlayer.setPosition(undefined)" class="p
ol鼠标点击显示弹框、移入标记鼠标变手型
ssy001128的博客
03-21 188
ol鼠标点击显示弹框、移入标记鼠标变手型
OpenLayers入门，OpenLayers鼠标移动事件使用，实现鼠标移动到点位上方后高亮显示点位要素
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-29 1312
本章主要讲解OpenLayers鼠标移动事件的使用，并简单实现鼠标移动到点位上方后高亮显示点位要素的功能，带领大家快速上手OpenLayers鼠标移动事件的应用。
OpenLayers笔记2：点、线、面矢量要素的自定义渲染
getMoreTime的博客
04-02 6607
新建矢量图层ol.layer.Vector时，可以通过使用ol.style来自定义渲染地图矢量要素的样式； ol.style概述 在ol.style中默认可以配置的要素包括： Fill：填充的样式，对应的模块为ol.style.Fill； Geometry：地理属性，对应模块为ol.style.Style，使用GeometryFunction设置要素的地理位置、几何属性等； Image：图像的样式...
OpenLayers 获取图层（ol.source.Vector类）中Features的各种方式
热门推荐
AE_yang的博客
09-23 1万+
目录 一、获取图层源 二、调用方法 方法一：forEachFeature 方法二： getFeatures 1.1 featuresCollection_ 1.2 featuresRtree_ 方法三：getFeatureById 一、获取图层源 所有方法都基于source层，所有需要先获得ol.source.Vector的实例 layerName.getSource() 二、调用方法 方法一：forEachFeature 该方法可以直接...
Openlayers实现地图全屏显示
10-14
在OpenLayers中，实现地图全屏显示是通过集成全屏控制（FullScreen Control）来完成的，这使得用户可以轻松地将地图扩展到整个浏览器窗口，提高地图的可读性和用户体验。 首先，为了使用OpenLayers库，我们需要在...
openlayers3点选、框选、多边形选择demo
02-05
openlayers3点选、框选、多边形选择点要素，供代码参考吧
openlayers3要素移动交互并弹出要素信息
03-24
openlayers3中，显示点要素。当鼠标移动到要素上，高亮显示要素，并弹出要素信息。
OpenLayers 笔记4：矢量图层交互与选定矢量要素突出显示
01-08
OpenLayers提供ol.interaction.Select类，来实现对矢量图层的交互。 也是通过监听地图、窗口事件，触发交互，使对应矢量要素产生动态变化。 ol.interaction.Select概述 ol.interaction.Select类可供设置的属性主要...
OpenLayers3实现鼠标移动显示坐标
10-14
主要为大家详细介绍了OpenLayers3实现鼠标移动显示坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
OpenLayer学习之ol.interaction.Select
HPUGIS的博客
06-29 8135
人生最迷茫的不过于此，一堆选择放在你面前，你却不知道到底选择那个是最合适的，这点很尴尬，始终要戒备自己会不会被坑，唉好痛苦，最痛苦的莫过于此，挣扎，挣扎一、概念该交互仅针对于矢量服务，矢量服务，矢量服务，主要用于feature选中（点击、鼠标悬浮等），做出相应的操作，例如高亮显示什么的，改变渲染样式。二、构造函数addConditionconditionlayersstyleremoveCondi...
openlayers 实现鼠标移动要矢量要素上高亮显示
gis_sss的博客
09-06 6237
一、鼠标移动到矢量要素上实现高亮显示的思路 （1）建立一个高亮的图层，鼠标移动获取的数据添加到高亮图层上边，鼠标移除，将改要素从高亮图层中删除，这种方式会影响点击事件，点击获取的永远是高亮图层要素，要是地图当前只有一个图层有点击事件影响不是很大，但是多个图层存在点击事件会受到影响，需要建立多个高亮图层进行分类显示属性信息。 （2）利用js的浅拷贝特性进行数据存储，鼠标移动获取的要素赋值给一个变...
封装openlayers_三、Openlayers关键概念
weixin_33022901的博客
01-13 712
openlayers是面向对象的。面向对象三大特性：封装、继承、多态面向对象语言：JAVA、C++、PHP、C#、Javascript、Python、Scala...本章学习内容： openlayers核心组件、事件、可观察属性、调试技术openlayers核心组件学习openlayers核心组件之前，了解： 1.类之间的关系 2.类之间的继承1 核心组件ol.Map1个ol.Ma...
OpenLayers项目分析
技术交流
07-02 306
[size=medium]摘要：OpenLayers 是由 MetaCarta公司开发的， 用于WebGIS客户端的JavaScript包，目前的最高版本是2.5 V，通过BSD License 发行。它实现访问地理空间数据的方法都符合行业标准，比如OpenGIS的WMS和WFS规范， OpenLayers采用纯面向对象的JavaScript方式开发，同时借用了Prototype框架和Rico库的...
vue openlayers 点击点位自义弹框
06-13
要在 Vue 中实现点击点位弹出自定义弹框，可以按照以下步骤操作： 1. 在 Vue 组件中引入所需库： ```javascript import 'ol/ol.css'; import Overlay from 'ol/Overlay'; import { Map, View } from 'ol'; import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'; import { OSM, Vector as VectorSource } from 'ol/source'; import { Icon, Style } from 'ol/style'; import { fromLonLat } from 'ol/proj'; ``` 2. 在 Vue 组件的 `mounted` 钩子中创建地图、图层、数据源、样式和弹框： ```javascript mounted() { // 创建地图 this.map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }), this.vectorLayer ], view: new View({ center: fromLonLat([116.38, 39.9]), zoom: 10 }) }); // 创建矢量图层和数据源 this.vectorSource = new VectorSource(); this.vectorLayer = new VectorLayer({ source: this.vectorSource, style: new Style({ image: new Icon({ src: require('@/assets/marker.png'), anchor: [0.5, 1] }) }) }); // 创建弹框 this.popup = new Overlay({ element: document.getElementById('popup'), positioning: 'bottom-center', stopEvent: false, offset: [0, -50] }); this.map.addOverlay(this.popup); }, ``` 3. 在 Vue 组件的模板中创建地图容器和弹框容器： ```html <template> <div> <div id="map"></div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div> </div> </template> ``` 4. 监听地图的 `singleclick` 事件，根据点击位置获取点位信息，然后在弹框中显示： ```javascript this.map.on('singleclick', (event) => { this.map.forEachFeatureAtPixel(event.pixel, (feature) => { const coordinates = feature.getGeometry().getCoordinates(); const content = `<p>${feature.get('name')}</p>`; document.getElementById('popup-content').innerHTML = content; this.popup.setPosition(coordinates); return true; }); }); ``` 5. 在弹框容器中添加关闭按钮的点击事件： ```javascript document.getElementById('popup-closer').addEventListener('click', () => { this.popup.setPosition(undefined); }); ``` 6. 根据需要自定义弹框的样式和内容。 注意：在使用自定义弹框时，需要注意弹框的位置和内容，避免重叠和遮挡。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值