OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制平行四边形

最新推荐文章于 2025-12-27 19:25:02 发布
原创 最新推荐文章于 2025-12-27 19:25:02 发布 · 317 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#前端 #javascript #vue.js #OpenLayers #绘制特殊图形 #绘制平行四边形

本文介绍了如何在OpenLayers6中通过鼠标拖拽方式实现平行四边形的绘制，详细讲解了依赖安装、vue项目的集成方法、绘制功能的实现以及测试效果，提供了一种简单易懂的实现方案。

专栏目录：
OpenLayers实战进阶专栏目录

前言

本章介绍如何使用OpenLayers在地图上使用实现鼠标拖拽方式绘制平行四边形。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
了解本专栏 订阅专栏 解锁全文
OpenLayers6实战，OpenLayers绘制特殊图形，OpenLayers绘制四角形（菱形），OpenLayers绘制菱形
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-27 371
本章讲解如何使用OpenLayers6实现绘制特殊图形，以绘制四角形（菱形），OpenLayers绘制菱形的功能为例。本章核心代码不依赖任何第三方插件，只依赖OpenLayers
Vue+OpenLayers7入门到实战：OpenLayers实现在地图上拖拽编辑修改绘制图形
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
05-27 419
本章介绍如何使用OpenLayers7在地图上拖拽编辑修改绘制图形。《OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形》，那么本章将在此基础上实现图形的拖拽编辑功能，方便我们对绘制后的图形进行修改操作。
OpenLayers教程：图形绘制之绘制几何图形
不睡觉的怪叔叔的博客
07-27 2534
OpenLayers的ol.interaction.Draw类实现了交互式绘制几何图形的功能，可以把它看作一个绘制图形的控件，使用合适的参数初始化它，并将它加入地图对象就可以进行交互式的图形绘制。 我们直接来看一个示例： drawShapes.html: <!DOCTYPE html> <html lang="en"> <head&...
openlayers：实现拖动、旋转和缩放 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-28 333
openlayers：实现拖动、旋转和缩放 (附完整源码）
OpenLayers6特殊图形绘制教程目录汇总文档，使用OpenLayers画点、线、曲线、多边形、圆形、半圆、椭圆、圆环、环形扇形、三角形、矩形、平行四边形、梯形、菱形、五角星、六角形和箭头等
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-12 1127
本章用于汇总OpenLayers地图中各种特殊图形绘制系列汇总目录。内容包含：点、线、多边形、圆形、半圆、四分之一圆、椭圆、圆环、半圆环、环形扇形、三角形、矩形、正方形、长方形、平行四边形、梯形、菱形、五角星、六角形（六芒星）以及箭头等等特殊图形。
Vue+OpenLayers6实战进阶专栏目录，Vue+OpenLayers实战案例，Vue+OpenLayers6实战教程
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
07-31 2573
本篇作为Vue整合OpenLayers实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。本专栏是讲解主流前端框架Vue整合前端最流行的JS二维地图引擎之一OpenLayers的实战教程。
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
05-29 1827
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-31 4911
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Vue+OpenLayers7入门到实战：OpenLayers实现鼠标拖拽方式绘制矩形（正方形和长方形）
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
05-10 546
本章介绍如何使用OpenLayers7在地图上实现鼠标拖拽方式绘制矩形（拖拽方式长方形和正方形）。OpenLayers本身是可以通过鼠标点击多个点的方式来绘制多边形的，当然也包括长方形和正方形，但是这种多边形绘制出来的图形并不是准确的“长方形”和“正方形”，多多少少都会有一些变形（形状不规则），而且也不好控制。本章就是为了解决上述问题，只需要通过鼠标拖拽方式就可以直接实时生成形状规则的“矩形”。
openlayers绘图功能实现画点、折线、圆、多边形、矩形
此爱如少年
07-13 1万+
绘图是webgis前端开发中很多见的一个需求，在openlayers中，包含一个ol.interaction.Draw类，提供交互式绘图功能，用起来较为方便。 1、ol.interaction.Draw类 ol.interaction.Draw是openlayers交互式操作中的绘图操作类，支持绘制常见的一些几何图形，如点、折线、多边形、圆、矩形等等。先来看下实例化一个Draw类的参数。 这里重...
地图技术知识：openlayers学习之绘制点标记（鼠标单击事件）
weixin_45031595的博客
01-22 3885
步骤思想 1、创建地图视图 2、创建矢量容器 3、创建矢量图层 4、将矢量图层添加至地图 5、监听地图点击事件 6、创建矢量点 7、设置样式 8、将矢量容器的矢量元素清空 9、再将新的矢量点add 组件代码 <template> <div id="container"> <div id="map" style="width: 100%; height: 100%"></div> </div> </templa
vue+openlayers图形交互，实现多边形绘制、编辑和保存
weixin_46074818的博客
06-11 4787
知识点： 1.绘制多边形，实例化ol.interaction.Draw对象 draw_inter = new ol.interaction.Draw({ source: source_draw,//矢量地图源 type: "Polygon",//绘图类型 }); //将交互绘图对象添加到地图中 map.addInteraction(draw_inter) 2.图形交互编辑，实例化ol.interaction.Select对象和ol.interaction.Modify对象 let select_f.
从零开始OpenGL ES(三) 绘制四边形
六道对穿肠的学习之旅
11-16 1799
原理 现在要实现用OpenGLES 实现四边形. 一个四边形是可以由两个三角形构成 那么我画两个相连的三角形来实现一个四边形. 如图 有个规定.：图形环绕方向必须一致,要么全是顺时针 要么全是逆时针 1、GL_TRIANGLES： v1, v2, v3, v3, v2, v4, 对应的数组 private final float[] vertexData={ -1f...
OpenLayers基础教程——地图交互之绘制图形
HerryDong的博客
12-14 5598
1、前言 前面的博客其实已经介绍过了如何在openlayers中绘制图形，不过那是基于已有的坐标进行绘制。很多时候，用户往往需要使用鼠标自行在地图上进行图形绘制，这就涉及到了openlayers中的地图交互功能，下面开始介绍。 2、绘制基础图形 在openlayers中，实现地图交互的类是ol.interaction，默认情况下，openlayers只支持Point(点)、LineString(线)、Polygon(面)、Circle(圆)这四种基本图形。下面一段代码实现了这四种基本图形的绘制： <!
OpenLayers 绘制，选中，鼠标悬浮
技术分享
10-09 4785
实现效果: 1.绘制点，线，多边形。 2.绘制对象添加相对应的信息， 3.选中绘画的上的矢量图层，并弹出信息. 3.存入数据库中。 绘制 官网api 不一一列举，官网api地址https://openlayers.org/en/latest/apidoc/module-ol_interaction_Draw-Draw.html （如果失效，请访问官网，搜索Draw） 绘...
openlayers开发&绘制点、圆、多边形
yGIS
04-23 8986
这个例子是使用openlayers来绘制矢量点、圆、和polygon的。首先需要创建一个地图。如下的代码。注意这里接入的是osm地图，相应的设置地图飞至的中心点，缩放层级。 var flyPt= ol.proj.fromLonLat([106.671670,26.409000]); map = new ol.Map({ target:'map', ...
OpenLayers 3 之 绘制图形（ol.interaction.Draw）详解
热门推荐
研究与专注
09-21 3万+
在地图上绘制各种各样的矢量图形，很多应用场景都需要用到，比如可以实现在客户端勾绘矢量图形并将结果保存到数据库以待后续编辑和可视化等等很多有用的功能。这次我们看看怎么利用 OpenLayers 3 绘制各种各样的图形，并添加到图层显示。在 OpenLayers 3 中负责绘制任务的是 ol.interaction.Draw 类，下面介绍这个类和功能的用法。
Node.js 后端 CORS 跨域问题终极解决指南
weixin_45680024的博客
12-25 1096
node.js后端跨域问题收录
vue v-for 列表渲染指令注意
最新发布
KLW75
12-27 230
3、指令遍历的目标是一个正整数n时，其一般用于让当前模板在1～n的取值范围内重复产生n次，value为从1开始到n为止依次递增的数值。v-for指令可以遍历多种不同类型的数据，数组是较为常见的一种类型，当然类型还可以是对象或数值。value为被遍历的obj对象的属性值，name为属性名。令遍历一个对象时，遍历的是对象自身所有可遍历的属性。
Openlayers 绘制区域
07-16
在 OpenLayers 中实现多边形区域绘制功能，可以通过 `ol.interaction.Draw` 来完成。该类提供了丰富的配置选项，可以设置绘制类型（如多边形）、最大点数、最小点数等。 以下是一个完整的示例代码，展示如何在 Vue ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值