Vue+OpenLayers实现矩形绘制及使用createBox方法处理的示例

最新推荐文章于 2025-08-27 11:54:46 发布

星光璀璨技术之心

最新推荐文章于 2025-08-27 11:54:46 发布

阅读量509

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript js

本文链接：https://blog.youkuaiyun.com/TechNovaX/article/details/132593372

js 专栏收录该内容

499 篇文章 ¥59.90 ¥99.00

订阅专栏

本文展示了如何在Vue项目中结合OpenLayers框架，实现在地图上绘制矩形并利用createBox方法处理。首先确保安装Vue和OpenLayers，然后在Vue组件中创建地图容器，初始化地图并启用矩形绘制交互。当绘制完成后，监听drawend事件，获取并处理矩形几何信息。该示例可作为基于地图的矩形操作参考。

Vue+OpenLayers实现矩形绘制及使用createBox方法处理的示例

在本文中，我们将介绍如何利用Vue和OpenLayers框架来实现在地图上绘制矩形，并使用OpenLayers的createBox方法进行处理。我们将为您提供相应的源代码和详细的步骤说明。

首先，确保您已经安装了Vue和OpenLayers，并已创建了一个Vue项目。如果您还没有安装它们，请按照官方文档进行安装和配置。

接下来，让我们开始编写代码。

首先，在Vue的组件中引入OpenLayers库并创建地图容器。在这个示例中，我们将在组件的模板部分添加一个带有id的div元素，并使用CSS样式设置其宽度和高度。

<template>
  <div class="

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

星光璀璨技术之心

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

openlayers3各种元素图形绘制

11-02

openlayers3 各种特殊图形绘制：进攻方向、自由地、分队战斗、弓型、扇形、箭头、钳击

OpenLayers6实战，OpenLayers实现鼠标拖拽方式绘制矩形（拖拽方式绘制长方形和正方形）

GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid

04-11

860

本章介绍使用OpenLayers在地图上实现鼠标拖拽方式绘制矩形（拖拽方式长方形和正方形）。OpenLayers本身是可以通过鼠标点击多个点的方式来绘制多边形的，当然也包括长方形和正方形，但是这种多边形绘制出来的图形并不是准确的“长方形”和“正方形”，多多少少都会有一些变形（形状不规则），而且也不好控制。本章就是为了解决上述问题，只需要通过鼠标拖拽方式就可以直接实时生成形状规则的“矩形”。

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

openlayers 在地图上绘制三角形、矩形、扇形、圆形、半圆、空心圆环等图形

sea9528的博客

12-04

4872

Openlayers是一个基于Javacript开发，免费、开源的前端地图开发库，使用它，可以很容易的开发出WebGIS系统。目前Openlayers支持地图瓦片、矢量数据等众多地图数据格式，支持比较完整的地图交互操作。

Openlayers实战：绘制矩形，正方形，正六边形

大剑师兰特的GIS世界

07-06

985

Openlayers地图中，绘制图形是非常重要的一个功能。Openlayers主要使用draw类来绘制图形，在实际项目中有时候会绘制矩形和正多边形。下面的示例是绘制矩形，正方形，正多边形。

js openlayers 在地图中勾画矩形

liuxu1875的博客

10-18

279

只需要在初始化draw控件时，将type设置为Circle，同时使用geometryFunction: ol.interaction.Draw.createBox()实现矩形的勾画。

020：vue+openlayers设置显示全屏功能（示例代码）

大剑师兰特的GIS世界

08-10

1472

本示例的目的是介绍演示如何在openlayers中使添加使用全屏控件，呈现全屏和还原的效果。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果

137：vue+openlayers 绘制矩形，利用createBox来处理

大剑师兰特的GIS世界

09-29

859

本示例的目的是介绍如何在vue+openlayer中使用draw来绘制矩形。点击查看本专栏内容目录列表。

Vue3＋Openlayers教程导航页【目录】

小彭的博客

04-18

719

欢迎来到 Vue3＋Openlayers 系列教程，这里是我在优快云编写的所有 Vue3＋Openlayers 系列相关文章的索引页，适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中，欢迎关注我，一起探索 Openlayers 的强大魅力！

Openlayers高级交互（10/20）：绘制矩形,截取对应部分的地图并保存

大剑师兰特的GIS世界

10-28

676

是一个有用的工具，用于测量时间流逝，特别是在需要根据时间差更新动画或物理模拟的场景中。通过使用getDelta()方法，可以确保动画在不同设备上表现一致，从而提高用户体验。在开发三维应用时，合理使用可以帮助实现更加流畅和自然的动画效果。

161.在 Vue3 中使用 OpenLayers 绘制矩形、获取屏幕像素坐标（pixel）并用 transformExtent 做坐标投影转换

最新发布

小彭的博客

08-27

219

这篇教程介绍了如何在Vue3中使用OpenLayers实现矩形绘制功能，并获取屏幕坐标和进行坐标转换。主要内容包括：1) 环境配置和依赖安装；2) 完整实现代码，包含地图初始化、矩形绘制交互、坐标转换和结果显示功能；3) 关键代码解析，重点说明地图初始化、坐标转换和像素计算等核心逻辑；4) 常见问题解答，解决坐标顺序、像素计算不准等问题；5) 进阶扩展建议，如格式化输出、TypeScript支持和通用绘制函数等。该示例使用OpenLayers 10.x和ElementPlus组件，适合OpenLayers初

Vue + OpenLayers 实现矩形绘制、地图截取和保存

laugh666的博客

09-12

762

方法中，我们需要实现地图的截图和保存功能。在本文中，我们将介绍如何使用 Vue 和 OpenLayers 库实现以下功能：绘制矩形、截取对应部分的地图并保存。至此，我们已经完成了 Vue + OpenLayers 实现矩形绘制、地图截取和保存的功能。你可以运行 Vue 应用，并在地图上绘制矩形，然后点击下载链接来保存地图截图。钩子函数中，我们初始化了地图，并添加了绘制矩形的交互功能。在 Vue 项目中，我们需要创建一个地图组件，用于显示地图和处理绘制矩形的功能。在上面的代码中，我们导入并注册了地图组件。

使用Vue和OpenLayers绘制矩形，并显示首尾点和中心点的坐标值，同时获取所有点的经纬度。

ByteZenith的博客

09-18

487

确保已经安装了Vue和OpenLayers，并且在Vue项目中引入OpenLayers库。在Vue组件中，我们需要先创建一个地图容器，并初始化地图。然后，我们将添加一个绘制交互工具来绘制矩形，并实时显示矩形的首尾点和中心点坐标值。在你的Vue应用程序中，你应该能够看到一个地图容器和矩形的首尾点和中心点坐标值。在上面的代码中，我们首先引入了必要的OpenLayers模块和样式。方法中，我们计算并更新了矩形的首尾点和中心点坐标值，并将其赋值给Vue组件的变量。方法中，我们定义了用于存储坐标值和交互工具的变量。

209：vue+openlayers 绘制矩形，拖拽编辑Modify后仍然为矩形

大剑师兰特的GIS世界

03-06

1294

第209个本示例的目的是介绍如何在vue+openlayers项目中绘制长方形（矩形），拖拽编辑后仍然为长方形（矩形）。在修改过程开始时，选定的几何图形将临时保存在要素内部，名称为“modifyGeometry”。在修改过程中（在 style 函数内）modifyGeometry 将被调整以保持具有正确尺寸的盒子形状。在修改过程的最后，“modifyGeometry”替换了原来的几何体。

openlayers图层切换，点线面矩形等的绘制

weixin_44358678的博客

02-27

786

openlayers 点线面地图初始化搭建

移动端openlayers封装绘制Draw-随手画-矩形-圆

厚积薄发.

07-17

583

如果直接使用官方示例的教程，在移动端绘制没法按压拖拽绘制，百度半天也是没有找到，解决了做一个笔记。

openlayers6 踩坑系列（三）绘制和编辑（矩形，圆，多边形，点，线）