vue+openlayers添加点击事件进行图片标记

最新推荐文章于 2024-08-11 17:51:29 发布

迷茫的小猿

最新推荐文章于 2024-08-11 17:51:29 发布

阅读量4.2k

点赞数 3

分类专栏： openlayer vue 文章标签： openlayers vue

本文链接：https://blog.csdn.net/weixin_43747076/article/details/106281921

版权

本文介绍了如何使用Vue与OpenLayers库，实现在地图上点击事件触发的功能，即在点击位置添加图片作为标记。通过创建图层并监听点击事件，将图片作为Feature添加到地图上。

摘要由CSDN通过智能技术生成

思考：首先肯定是先创建一个图层，然后在该图层点击的位置添加一个feature(图片)

代码实现：

 //创建矢量容器，当点击时将图标feature放进去
 var iconVector = new VectorSource({
   
   features:[]
 })
 
 //创建图层
 var iconLayer = new VectorLayer({

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

迷茫的小猿

关注关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册

GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

10-31

3301

本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。

openlayer 图层点击事件 鼠标单击

在职可交流前端开发，包括：web端、uniapp等，欢迎指教。

06-27

1424

一个图层创建好了，接下来我们要做的是，如何通过鼠标点击打开点击对象的详情弹框？详情弹框做点击按钮效果。

参与评论您还未登录，请先登录后发表或查看评论

openlayers实现本地图片作为背景，添加marker标记

06-09

刚刚使用openlayers做了一个简单的小例子，注释很全，很简单，将本地的图片作为背景，能够按照坐标添加任意个标记

Openlayers+Vue的集成和使用,持续更新...

最新发布

dukangcheng的博客

08-11

225

其中view主要是视图层面的东西，比如控制视图的center，缩放最大最小等控制。4. 绘制点位聚合功能，即图中坐标点位太多将距离很近的点位聚合成一个。3.地图中创建线条以及给线条绘制方向（线条也是一种feature）2.添加图层到地图中以及加入markerd到地图中。

vue中openlayers热力图,标记带文本,弹窗,绘制边界,多图片标记学习总结

weixin_44547882的博客

10-11

1376

首先，我也是参考网上各种大佬代码写出来的，然后根据自己需要揉到一起的例子我这用的底图因为没钱买地图下载器所以比较丑，还好我不在乎外表。。。。（因为要内网下做项目，所以在这写demo就没加载其他在线地图资源了，就放了这个特丑的自己下的。。。） <div class="container-fluid"> <h1>热力图,标记带文本,弹窗,绘制边界,多图片标记</h...

vue+openlayers在地图添加图标

简的博客

07-20

8228

参考帖子：https://blog.csdn.net/feiteyizu/article/details/81133845 有两种方式，介绍第二种，第一种太简单，，而且不能动态增加dom元素从而添加图标，也就是说，如果使用上述帖子的第一种方式，你需要加几个图标，就需要提前预定好多少个图标对应的dom元素，而且未被使用的图标会显示在地图下面，地图会被撑变形，需求如果只是添加一两个图标，且是固定的，可...

vue 地图使用openlayer

weixin_43907110的博客

10-25

377

vue2 openlayer

Openlayers学习笔记——Vector Layer 事件类型

隔壁老瓦的专栏

04-14

1960

Vector类是继承了OpenLayers.Layer的，Layer的所有事件类型都能在Vector中被使用。一、事件类型的注册 vector_layer.event.register(type,obj,listener); vector_layer是矢量图层的名字，上面的代码能够将事件注册到事件类型中去，除了Layer的事件类型外，矢量图层还支持以下事件...

vue+openlayers简单示例

10-19

此外，Vue和OpenLayers结合的好处在于，你可以利用Vue的状态管理（如Vuex）和响应式特性，实现更复杂的功能，如动态加载图层、添加标记、控制交互等。通过监听Vue的数据变化，可以实时更新地图状态，实现丰富的用户...

Vue+OpenLayers6入门教程汇总目录，OpenLayers教程，Vue+OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册

GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

05-21

9394

OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。

openlayers 添加文字标注

06-18

openlayers 实现在地图上添加文字标注。为图片注记添加文本标签

Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总

GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

05-29

890

Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。

openlayers绑定点击事件点击图标，图标变大

weixin_45598400的博客

06-29

1266

openlayers点击事件点击图标，图标变大。

Openlayer中的事件

09-02

1166

绑定事件：map.on(type, listener) 取消绑定：map.un(type, listener) type:事件类型 listener：执行得函数体 //事件类型 let type = { click:'click',//单击 dblclick:'dblclick',//双击，双击会触发click singleclick:'singleclick',//单击，延迟250毫秒，就算双击不会触发 moveend:'moveend',//鼠标滚动事件

openlayers-09-添加标注（文字+图片）

chuanren1991的博客

05-16

3445

以上顺序也可以进行调整，可以先实例化标注对象，在实例化矢量图层时直接将标注对象放在矢量图层源的features属性中，而不是调用addFeature()方法，后期进行添加。同理，在实例化map对象时，直接将矢量图层添加到map对象的layers属性中，而不是在后面调用map的addLayer()方法添加图层。在地图上添加标注，大概分为三步。

openlayers，实现点击图标，图标变大，再点击移动按钮，方可移动，移动的过程中点击其他图标不可变大。

weixin_45598400的博客

06-30

1174

openlayers

开源GIS（七）——openlayers中单击获取要素（深度好文）