Vue+OpenLayers7入门到实战：添加一个Image图片点要素到地图上

原创 已于 2024-03-09 21:25:13 修改 · 438 阅读 · 2 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #前端 #javascript #OpenLayers #图片要素点 #图标要素

于 2024-03-05 09:24:17 首次发布
本文介绍了如何在Vue项目中使用OpenLayers7添加一个Image图片作为点要素到地图上。通过创建矢量图层，设置样式，并将点Feature添加到图层上，实现了地图上的图标展示。详细步骤包括依赖安装、Vue中OpenLayers7的使用，以及代码实现和测试效果的演示。

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

前言

本章介绍如何使用OpenLayers7在地图上添加一个图标要素点。
首先要创建矢量图层，然后把点添加到矢量图层即可，图片则是通过style样式去设置，可以把style设置到矢量图层上，也可以设置style到Feature要素上，Feature要素的风格会覆盖图层。

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "7.5.2"
  1. 使用npm安装依赖
npm ins
了解本专栏 订阅专栏 解锁全文
OpenLayers入门，添加一个Image图片点要素到地图上
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-13 2428
使用OpenLayers添加图标到地图上。首先要创建矢量图层，然后把点添加到矢量图层即可，图片则是通过style样式去设置，可以把style设置到矢量图层上，也可以设置style到Feature要素上，Feature要素的风格会覆盖图层。
openlayers：实现图片标注（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 321
openlayers：实现图片标注（附完整源码）
openlayers添加PNG图片到地图上
最新发布
weixin_43493318的博客
02-17 443
【代码】openlayers添加PNG图片到地图上。
vue+openlayers添加点击事件进行图片标记
weixin_43747076的博客
05-22 4394
思考：首先肯定是先创建一个图层，然后在该图层点击的位置添加一个feature(图片) 代码实现： //创建矢量容器，当点击时将图标feature放进去 var iconVector = new VectorSource({ features:[] }) //创建图层 var iconLayer = new VectorLayer({ source:iconVector }) //将图层添加到地图上 this.map.addLayer(iconLayer) this.ma
vue3中使用openLayers 实现地图上 图片回显
zsx1799268625的博客
04-08 782
vue3中使用openlayers实现地图上图形显示
openlayers3中Overlay用法
weixin_34281537的博客
04-26 1010
Overlay 从名字看，是覆盖图、覆盖物的意思，主要的用途就是在地图之上再覆盖一层，用以显示额外的可见元素，可见元素一般是 HTML 元素，利用 overlay，可以将可见元素放置到地图的任意位置，形成地图上再浮动一层的效果。例如在地图上相应的坐标放置一个标志，标签，利用 overlay 都可以做到，具体来说，点击地图上某位置，在点击位置弹出弹出框就是利用了 overlay...
Vue+OpenLayers7入门到实战：OpenLayers7如何使用gifler库来实现gif动态图图片叠加到地图上
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-07 579
OpenLayers7本身不支持gif图片作为图标要素显示到地图上，所以需要通过其他办法来实现支持gif图片。本章介绍如何使用OpenLayers7在地图上使用gifler库先生成canvas画板，然后通过canvas画板的重绘事件来重新渲染地图来达到实现OpenLayers的gif动态图功能。
Vue+OpenLayers7入门到实战：OpenLayers加载GeoJson格式数据并解析成多边形、线段、点和区域范围等要素叠加到地图矢量图层上
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-25 844
本章介绍如何使用OpenLayers7在地图上加载GeoJson格式数据并解析成多边形、线段、点和区域范围等要素叠加到地图矢量图层上的功能。前面两章也是可以支持多边形、线段、点和区域范围灯数据加载的，只是没有设置样式，所以只能看到点，本章就相当于完整版本，可以将所有图形都详细展示出来。
Vue+OpenLayers7入门到实战：OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-26 799
本章介绍如何使用OpenLayers7在地图上实现图形绘制功能，OpenLayers地图实现在地图上绘制线段、圆形和多边形等基本图形。注意：本章需要用到Element-UI组件，可能需要额外安装依赖，这里跳过不详述，具体可参考Element-UI官方文档。
Vue+OpenLayers7入门到实战：OpenLayers7点聚合（聚散点）功能，地图缩小显示聚集数量，点击聚集点散开和地图放大后显示要素图片
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-09 333
本章介绍如何使用OpenLayers7在地图上实现地图点聚合（聚散点）功能，实现地图缩小显示聚集数量，点击聚集点和地图放大后显示要素对应icon图片的功能。
170：vue+openlayers 绘制地图上多个点的信封envelope矩形
大剑师兰特的GIS世界
11-08 695
第170个本示例的目的是介绍演示如何在vue+openlayers项目中如何根据多边形的几个坐标点来获取面积值。
openlayers：实现从矢量图块中选择要素 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-30 190
openlayers：实现从矢量图块中选择要素 (附完整源码）
源码分析之Openlayers中样式篇ImageStyle类
Jinuss的博客
01-21 1134
源码分析之Openlayers中样式篇ImageStyle类
Vue下OpenLayers中Style-Icon的图片路径
Moon Star
10-23 2521
OpenLayers加载图片的方式
openlayers6【十五】地图样式 Style类详解
@必意玲
07-17 1万+
文章目录1. 写在前面2. ol.style 属性及子类3. ol.style使用栗子 1. 写在前面 地图样式是由 style 类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。 了解更多矢量图层可以参考：openlayers6【十三】地图矢量图层 Vector 详解 2. ol.style 属性及子类 1.1 可以配置的选项 /* * @typedef {{ * geometry: (undefined|
openlayers-09-添加标注（文字+图片）
chuanren1991的博客
05-16 4310
以上顺序也可以进行调整，可以先实例化标注对象，在实例化矢量图层时直接将 标注对象放在矢量图层源的features属性中，而不是调用addFeature()方法，后期进行添加。同理，在实例化map对象时，直接将矢量图层添加到map对象的layers属性中，而不是在后面调用map的addLayer()方法添加图层。在地图上添加标注，大概分为三步。
OpenLayers之标注功能二：图文标注
热门推荐
不睡觉的怪叔叔的博客
08-17 2万+
目录 一、图文标注介绍 二、使用加载矢量点要素实现标注 三、使用叠置层实现标注 一、图文标注介绍     图文标注，指同时使用文本和图片的标注，通过文本结合图标来展现标注点的信息，也是一种简单的地图标注。     一般情况下，文本用来描述标注点的关键词或主题信息（如名称等），小图标则作为标注点的位置标识，也包含一定的属性信息（如类型等）。     可以使用加载矢量点要素的方式实现，设...
Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度)
BADAO_LIUMANG_QIZHI的博客
07-10 3802
场景 Openlayers中使用animate实现车辆定位导航效果(以当前车辆为中心移动)： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118634344 上面实现的导航效果，如果是车辆行驶的点位轨迹X和Y都会改变就会这样 怎样实现车辆的图片带旋转角度，即车辆行驶带转角的效果。 要实现的效果如下 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公..
Vue+OpenLayers 实现轨迹动画详解
OpenLayers是一个强大的开源JavaScript库，用于在Web上展示和操作地理空间数据。Vue.js则是一个轻量级的前端框架，用于构建用户界面。 首先，我们需要在Vue组件的`template`部分定义地图容器和相关UI元素，如进度条...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值