OpenLayers入门，添加一个Image图片点要素到地图上

原创 已于 2023-05-28 22:49:22 修改 · 2.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #javascript #前端 #OpenLayers #地图叠加图标

于 2023-04-13 14:49:07 首次发布
本文是OpenLayers入门教程，介绍如何在地图上添加Image图片作为点要素。通过创建矢量图层，设置样式，并将点Feature加入图层，实现图片在地图上的叠加展示。内容包括Vue中集成OpenLayers的使用方法，以及代码实现和效果演示。

专栏目录：
OpenLayers入门教程汇总目录

前言

使用OpenLayers添加图标到地图上。
首先要创建矢量图层，然后把点添加到矢量图层即可，图片则是通过style样式去设置，可以把style设置到矢量图层上，也可以设置style到Feature要素上，Feature要素的风格会覆盖图层。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
了解本专栏 订阅专栏 解锁全文
029：vue+openlayers:使用MVT格式读取瓦片数据（示例代码）
大剑师兰特的GIS世界
08-11 1591
本示例的目的是介绍演示如何在vue+openlayers中使用MVT读取矢量瓦片数据，并显示图形。直接复制vue+openlayers源代码，操作2分钟即可运行实现效果
Vue+OpenLayers7入门到实战：添加一个Image图片点要素到地图上
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-05 439
本章介绍如何使用OpenLayers7在地图上添加一个图标要素点。首先要创建矢量图层，然后把点添加到矢量图层即可，图片则是通过style样式去设置，可以把style设置到矢量图层上，也可以设置style到Feature要素上，Feature要素的风格会覆盖图层。
openlayers 添加图片和文字点位图层
收集、分享
04-16 359
openlayers 添加图片和文字点位图层
openlayers加载静态图片地图
10-31
openlayers加载静态图片作为底图，操作图片流畅，可控显示范围和等级
openlayers实现本地图片作为背景，添加marker标记
06-09
刚刚使用openlayers做了一个简单的小例子，注释很全，很简单，将本地的图片作为背景，能够按照坐标添加任意个标记
vue3 openlayers--添加图片图标
M__O__M的博客
08-02 3581
vue3+ts openlayers--添加图标
OpenLayers入门，使用OpenLayers叠加多边形、圆形、线段和点要素到地图上
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-13 1921
本章详细介绍一下如何使用OpenLayers叠加多边形、圆形、线段和点要素到地图上，并设置样式。要叠加这些元素到地图上，首先要理解OpenLayers的结构。就如同photoshop这些图像编辑软件和游戏引擎一样，OpenLayers是基于图层(layer)结构设计的，通过创建不同图层叠加到canvas画板上实现地图效果。那么闲话少讲，让我们来看看如何快速叠加多边形、圆形、线段和点要素到地图上。
OpenLayers入门，OpenLayers使用一张图片作为地图的基本底图
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-12 2103
如果我们项目没有vmts、vms、xyz等地图服务，只有一张静态图片，也可以作为地图基本图层使用。本章我们就讲讲如何使用OpenLayers使用一张图片作为地图的基本底图。
OpenLayers6入门，OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-14 1925
OpenLayers实现对地图上的任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
openlayer添加自定义图片图层
“跟他人学，和自己比”
03-28 3327
openlayer添加自定义图片图层 这个就是有一种图片，把他放到openlayer里面去！ 首先引入相关的库文件 import Projection from 'ol/proj/Projection' import Static from 'ol/source/ImageStatic' import Map from 'ol/Map' import ImageLayer from 'ol/layer/Image' import View from 'ol/View' impor
openlayers添加覆盖层
10-09
openlayers添加云层覆盖物至地图上，自定义移动范围，增添地图动态效果
openlayers3 获取点图层数据并添加标注和展示标注信息实例
11-29
openlayers3 显示静态地图，从后台查询点数据（后台java代码没有提交，太简单了。。。）展示到地图并添加标注，给标注添加点击事件并展示标注信息，初次接触开源GIS，代码中有错误还请各位看官指正，感谢！
使用openlayer添加图层
weixin_51237264的博客
05-05 1425
需求 项目开发使用openlayer 给map对象添加图层示例 代码示例 1.引入 import ol from "openlayers" 2.创建地图对象 this.mapOne = new ol.Map({ target: "mapOne", controls: ol.control .defaults({ attributionOptions: { collapsed: false } }) .extend([new ol....
openlayers添加PNG图片到地图上
weixin_43493318的博客
02-17 445
【代码】openlayers添加PNG图片到地图上。
openlayers学习——3、openlayers加点加圆加图标图片
记录生活点滴
01-06 5516
openlayers加点加圆加图标图片 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint
openLayer使用Feature添加点线面图层
最新发布
weixin_58325937的博客
06-25 1286
openLayer使用Feature添加点线面图层
openlayers学习——7、openlayers加图层
记录生活点滴
01-12 4366
openlayers加图层 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/index
openlayers三：添加图片和图标
weixin_30410119的博客
06-13 3363
openlayers添加图片是指： 　　添加在地图上的图片会跟随地图同步放大缩小 而添加图标是指： 　　添加在地图上的图片不会跟随地图同步放大缩小 添加图片： 　　首先初始化图片图层： 1 initImageLayer: function (extent) { 2 this.imageLayer = new ol.layer.Image({ 3 ...
Openlayer添加聚合点图层
西柚2015地信小白GISer
05-13 602
官方文档文档链接传送门https://openlayers.org/en/latest/apidoc/module-ol_source_Cluster-Cluster.html 核心代码： 还有许多参数可查看上述官方文档 let cluster = new Cluster({ source: vectorSource, }); 加载代码: AddClusterPointLayer(id, geojson, img, type = "top") ...
OpenLayers入门指南：JavaScript地理空间地图开发
文档首先阐述了OpenLayers的基本定位：它是一个用于创建动态、可交互Web地图应用程序的客户端JavaScript库，不依赖任何特定浏览器或插件，只要目标浏览器支持JavaScript和DOM（文档对象模型），即可正常运行。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值