OpenLayers入门，使用OpenLayers叠加多边形、圆形、线段和点要素到地图上

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

#gis地图 #OpenLayers #OpenLayers叠加要素 #OpenLayers矢量图层 #OpenLayers添加要素

于 2023-04-13 11:07:00 首次发布
本文介绍了如何使用OpenLayers在地图上叠加多边形、圆形、线段和点要素，讲解了创建矢量图层、设置样式以及在Vue项目中的应用，提供代码实例和效果演示。

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

前言

本章详细介绍一下如何使用OpenLayers叠加多边形、圆形、线段和点要素到地图上，并设置样式。
要叠加这些元素到地图上，首先要理解OpenLayers的结构。就如同photoshop这些图像编辑软件和游戏引擎一样，OpenLayers是基于图层(layer)结构设计的，通过创建不同图层叠加到canvas画板上实现地图效果。
那么闲话少讲，让我们来看看如何快速叠加多边形、圆形、线段和点要素到地图上。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
了解本专栏 订阅专栏 解锁全文
OpenLayers入门，OpenLayers如何加载GeoJson多边形、线段、点和区域范围等数据并叠加到OpenLayers矢量图层上
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
07-28 822
前面两章已经讲了OpenLayers如何加载GeoJson数据到矢量图层和webgl图层上，前面两章也是可以支持多边形、线段、点和区域范围灯数据加载的，只是没有设置样式，所以只能看到点，本章就相当于完整版本，可以将所有图形都详细展示出来。
OpenLayers6入门，使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-13 3727
OpenLayers地图中当叠加超过几千以上要素点就开始变慢，一万以上的要素点的时候，浏览器页面就开始卡顿或直接卡死，甚至浏览器会弹出是否等待页面加载的提示。这时候要怎么优化？OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格样式不能根据要素（Feature）的风格样式（style）自定义设置，只能用图层（layer）的风格样式（style）。
openLayer使用Feature添加点线面图层
最新发布
weixin_58325937的博客
06-25 1287
openLayer使用Feature添加点线面图层
（三十一）矢量数据的空间分析——叠置分析①
qq_42540466的博客
06-12 7418
矢量数据的空间分析——叠置分析①，主要介绍图层擦除、标识叠加、相交操作工具。
Openlayers 教程 14 - 叠加天地图WMTS图层 - 中国近海海洋等深面图层服务
非科班Java出身GISer的博客
08-31 919
Openlayers 叠加天地图-中国近海海洋等深面图层服务。
openlayers如何使用（五）叠加层的应用
可乐加冰的博客
08-24 1726
创建好叠加层后，初始的状态是不显示的，我们只需要在元素对应的事件中去调用一下这个方法即可显示叠加层。
Vue+OpenLayers7入门到实战：使用OpenLayers叠加多边形、圆形、线段和点要素到地图上
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-05 390
本章介绍如何使用OpenLayers7在地图上叠加多边形、圆形、线段和点要素，并设置对应的样式。要叠加这些元素到地图上，首先要理解OpenLayers的结构。就如同photoshop这些图像编辑软件和游戏引擎一样，OpenLayers是基于图层(layer)结构设计的，通过创建不同图层叠加到canvas画板上实现地图效果。那么闲话少讲，让我们来看看如何快速叠加多边形、圆形、线段和点要素到地图上。
Vue+OpenLayers7入门到实战：OpenLayers加载GeoJson格式数据并解析成多边形、线段、点和区域范围等要素叠加到地图矢量图层上
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-25 847
本章介绍如何使用OpenLayers7在地图上加载GeoJson格式数据并解析成多边形、线段、点和区域范围等要素叠加到地图矢量图层上的功能。前面两章也是可以支持多边形、线段、点和区域范围灯数据加载的，只是没有设置样式，所以只能看到点，本章就相当于完整版本，可以将所有图形都详细展示出来。
OpenLayers入门，添加一个Image图片点要素到地图上
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-13 2439
使用OpenLayers添加图标到地图上。首先要创建矢量图层，然后把点添加到矢量图层即可，图片则是通过style样式去设置，可以把style设置到矢量图层上，也可以设置style到Feature要素上，Feature要素的风格会覆盖图层。
三十一、openlayers官网示例Draw Features解析——在地图上自定义绘制点、线、多边形、圆形并获取图形数据
aaa_div的博客
05-28 2044
已经绘制了一个图形，但是并没有获取到。this.vectorlayer.getSource().getFeatures()不能实时获取到绘制图形的数据，因为drawend事件里feature还没被加到图层上。features绑定的数组不是普通的数组，Collection是openlayers内部定义的一个类似数组的集合。总的来说，两种方法都可以，甚至可以定义一个数组，每次绘制完都push一下当前绘制的feature。想要在地图上绘制图形，需要用到一个交互类Draw，new Draw，设置绘制的图形类型。
Openlayers3 绘制圆
04-26
NULL 博文链接：https://jjxliu306.iteye.com/blog/2371473
openlayers3点选、框选、多边形选择demo
02-05
openlayers3点选、框选、多边形选择点要素，供代码参考吧
openlayers对矢量图（多边形） 的增删改查
07-24
openlayers对矢量图（多边形） 的增删改查，三角形、矩形、五边形，你想几边就几边；添加、删除矢量图，修改矢量图，旋转、平移、拉伸
openlayers3画线功能例子
01-03
openlayers3 画线，画扇形图， 能正常运行的小例子，
OpenLayers入门，webgl图层叠加大量Icon图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-13 1840
上一章中《OpenLayers入门，使用webgl图层叠加大量点要素，解决OpenLayers地图中叠加大量点导致浏览器卡住变慢的问题》已经讲了如何地图中如何添加大量点到webgl图层优化大量点浏览器页面卡顿的问题，本章补充一下叠加图片图标到地图的情况下。
使用OpenLayers3对接geoserver的WPS服务完成叠加分析
追光者的博客
01-17 5013
WPS服务在geoserver的安装就不再累赘了， 最近接到新任务，使用OpenLayers3对接geoserver的WPS服务完成叠加分析；作为一个刚开始玩WebGis的新人来说，WPS在网上很难找到资料，即使在GItHub； 下面直接拖出我的主要代码吧， var vector = new ol.layer.Vector( { source : new ol.source
Openlayers 教程 08 - 圆的操作 - 几何圆与地理圆（正多边形）
非科班Java出身GISer的博客
03-21 2445
Openlayers 圆的操作，介绍创建圆的方法以及根据圆获取圆形多边形的方法。
openlayers坐标点添加圆形、自定义图片和内容，popup弹框、添加多个text文本和样式、点聚合、清除坐标点、画闭合区域及其样式功能集合。
weixin_40992252的博客
11-25 1149
/在feature中添加坐标点的一些基本信息]),});//添加文字及其样式}),}), // 使用与填充相同的背景填充样式padding: [5, 10, 5, 10], // 文本周围的填充，上右下左（像素）}),//添加图片坐标点scale: 0.2}),}));});
（五）openlayers加圆形以及引入element-ui组件
fang427的博客
04-26 850
openlayers加圆形以及引入elemen-ui组件
OpenLayers3实现多种战术图形绘制功能
OpenLayers 3 是一个功能强大的开源 JavaScript 地图库，广泛应用于 WebGIS 系统中，支持在浏览器端实现地图展示、交互操作以及空间数据的可视化。其中，图形绘制是 OpenLayers 3 的核心功能之一，尤其在军事、应急...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值