Vue.js和OpenLayers的多边形绘制及面积计算

最新推荐文章于 2025-06-03 11:34:48 发布

星光璀璨技术之心

最新推荐文章于 2025-06-03 11:34:48 发布

阅读量327

点赞数 1

CC 4.0 BY-SA版权

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

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

js 专栏收录该内容

499 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何使用Vue.js和OpenLayers库创建地图组件，绘制多边形，生成GeoJSON数据，并计算多边形面积。通过设置开发环境，创建地图组件和主应用程序，实现了地图展示、多边形绘制功能，以及面积的实时计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js和OpenLayers的多边形绘制及面积计算

在本文中，我们将学习如何使用Vue.js和OpenLayers库来绘制多边形，并生成相应的GeoJSON数据。此外，我们还将介绍如何计算多边形的面积。让我们开始吧！

1. 环境设置

首先，我们需要设置开发环境。确保你已经安装了Node.js和Vue CLI。使用以下命令创建一个新的Vue项目：

$ vue create vue-openlayers-polygon

进入项目目录并运行以下命令，安装OpenLayers：

$ cd vue-openlayers-polygon
$ npm install ol

2. 创建地图组件

接下来，我们将创建一个Vue组件来显示地图和绘制多边形。在src/components目录下，创建一个名为Map.vue的文件，并添加以下代码：

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

星光璀璨技术之心

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

241：vue+openlayers绘制多边形，计算面积值

大剑师兰特的GIS世界

07-16

681

第241个本示例的目的是介绍如何在vue+openlayers项目中绘制多边形，通过Polygon的getArea方法，计算出面积。

Vue和OpenLayers的JavaScript代码：绘制多边形并计算面积值

laugh666的博客

09-19

279

在本文中，我们将学习如何使用Vue和OpenLayers绘制多边形，并通过JavaScript计算其面积值。我们还初始化了Vue组件的数据，包括地图对象、图层数据源、绘制交互对象、修改交互对象、捕捉交互对象和面积值。方法中，我们获取绘制的要素的几何对象，并根据对象的类型使用适当的方法计算面积值。我们还添加了两个按钮，一个用于开始绘制多边形，另一个用于计算多边形的面积值。然后，我们创建了绘制交互对象、修改交互对象和捕捉交互对象，并将其添加到地图中。的Vue组件，其中包含绘制多边形和计算面积值的逻辑。

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

openlayers绘制点、圆、多边形

qq_46005282的博客

02-26

937

我用的是4326坐标系，有些地方和3857坐标系不一样思维导图是大佬整理的，我拿来用了。

Vue和OpenLayers：绘制多边形并显示面积的实现（含源代码）

ByteZenith的博客

09-03

246

在Vue文件中，我们将引入OpenLayers库，并创建一个地图容器和一个按钮，用于触发绘制多边形的操作。使用上述代码，您可以在Vue应用程序中实现一个具有绘制多边形并显示面积功能的地图组件。在上面的代码中，我们引入了OpenLayers所需的各种模块，包括地图、图层、源、交互等。最后，在模板中，我们使用一个按钮来触发绘制操作，该操作通过修改CSS样式将鼠标光标设置为十字线。方法中，我们创建了用于绘制、修改和捕捉要素的交互对象，并将它们添加到地图中。事件，在绘制完成后计算多边形的面积并打印到控制台上。

vue3-openlayers 点击多边形弹框，高亮多边形，自定义属性传递，鼠标悬浮多边形上动态修改鼠标样式

无心使然云中漫步

06-19

464

本篇介绍一下使用vue3-openlayers点击多边形弹框，高亮多边形，自定义属性传递，鼠标悬浮多边形上动态修改鼠标样式。

134.在 Vue3 中使用 OpenLayers 根据坐标点数组绘制多边形并显示面积数

最新发布

小彭的博客

06-03

211

摘要：本文介绍了一个基于Vue3和OpenLayers实现的地图多边形绘制与面积计算系统。该项目主要功能包括：加载OSM底图、根据坐标绘制多边形、计算面积（平方公里）并以弹窗显示、支持图层清除。技术栈采用Vue3+scriptsetup、OpenLayers v8+和ElementPlus。文章详细展示了代码结构，包含地图初始化、多边形绘制、面积计算和弹窗交互的实现方法，同时提供了坐标转换、单位换算等技术要点说明。最后还提出了支持GeoJSON、多图层叠加等进阶优化方向，为开发者提供了完整的地图功能实现参考

60.在 Vue 3 中使用 OpenLayers 绘制自由线段、自由多边形

小彭的博客

01-07

908

在现代 Web 开发中，地图功能已经成为许多应用的重要组成部分。OpenLayers 是一个强大的开源地图库，支持多种地图源和地图操作。结合 Vue 3 的响应式特性，我们可以轻松实现地图的交互功能。本文将详细介绍如何在 Vue 3 中使用 OpenLayers 绘制自由线段和自由多边形。本文详细介绍了如何在 Vue 3 中使用 OpenLayers 绘制自由线段和自由多边形。通过结合 Vue 3 的 Composition API 和 OpenLayers 的强大功能，我们可以轻松实现复杂的地图交互。

123.在 Vue3 中使用 OpenLayers 实现绘制 Draw 多边形并 Modify 编辑图形

小彭的博客

04-25

258

在 GIS 开发中，绘制图形并进行修改是非常常见的基础能力。无论是测量面积、标记区域、还是画草图，用户都需要在地图上自由绘制图形并进行后续的编辑操作。本文将使用实现如下功能：✅ 在地图上绘制多边形✅ 支持图形绘制的开始/结束✅ 支持图形的修改与取消修改✅ 使用 Vue 3 Composition API 编写，结构清晰，利于维护通过本文，我们完成了一个基于 Vue3 + OpenLayers 的实用小功能 ——绘制并编辑图形，它可以作为 GIS 系统、地图标绘、空间分析等功能的基础模块。

Openlayer【三】—— 绘制多边形&GeoJson边界绘制

共勉

11-21

2127

深入探讨了OpenLayers中多边形和GeoJson边界的绘制方法。首先，我们介绍了OpenLayers的基本概念和功能，然后详细解析了如何使用OpenLayers绘制多边形。接着，我们深入探讨了GeoJson数据格式的特点和应用，以及如何在OpenLayers中使用GeoJson数据进行边界绘制。最后，我们通过实例演示了如何结合多边形和GeoJson进行复杂的地图边界绘制

openlayers 绘图功能，编辑多边形，长度面积测量，tip提示（七）

无心使然云中漫步

06-14

924

主要是 openlayers 中 styleFunc 功能的使用，效果如下。

OpenLayersPolygonsMerge:在OpenLayers中合并两个相邻的多边形

04-05

OpenLayersPolygonsMerge 将openlayers中的两个相邻多边形合并为一个。对于教程，请单击以下链接

Vue+OpenLayers实现绘制和编辑多边形

CodeWhizZ的博客

08-30

893

而OpenLayers是一个功能强大的开源地图库，可以方便地集成地图和地理空间数据的展示与交互。通过以上代码和配置，我们可以轻松地利用Vue.js和OpenLayers实现绘制和编辑多边形的功能。至此，我们已经完成了Vue+OpenLayers绘制和编辑多边形的功能。在上面的代码中，我们首先引入了OpenLayers的必要模块和样式。最后，将这些交互对象添加到地图实例中，就可以实现绘制和编辑多边形的功能了。的Vue组件，在该组件中引入OpenLayers库和样式，并初始化地图。在这里，我们选择绘制多边形(

OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形

GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程

04-14

2545

通过使用OpenLayers的Draw模块实现在地图上绘制线段、圆形和多边形（三角形、矩形等多边形）。

实现在openlayer中绘制多边形，编辑，删除等

weixin_58350627的博客

06-09

2402

实现在openlayer中绘制多边形，编辑，删除等

Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积

BADAO_LIUMANG_QIZHI的博客

11-13

2877

场景 Vue+Openlayer使用Draw实现交互式绘制线段： Vue+Openlayer使用Draw实现交互式绘制线段_BADAO_LIUMANG_QIZHI的博客-优快云博客在上面的基础上实现的交互式绘制线段，还可以实现绘制多边形并直接计算出面积。注：博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_优快云博客关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现 1、导入基本模块 //导入基本模块 import "ol/ol.css

Openlayers：Polygon绘图工具

席木木的博客

10-20

1248

Openlayers目前已更新至v7.1.0版本。官网中也提供了绘制各种Geometry->Feature几何要素的示例Demo，如：Draw and Modify Geodesic Circles、Draw Shapes等，如下为根据官网例子定义的DrawPolygon绘图工具，支持绘制任意多边形、修改多边形顶点，内置了多边形Geometry转换为WKT或者GeoJSON的函数接口。

Vue中使用openlayer3

m0_37939797的博客

07-14

318

vue使用openlayer3

使用openlayers3绘制polygon(多边形)

weixin_33843409的博客

08-10

5303

问题：在用openlayers3绘制多边形时老是出现问题,再用鼠标双击结束绘图时，图形也消失不见原因一：在代码中多次用到source:new ol.source.Vector(),相当于多次实例化对象，改正，可以全局定义source=new ol.source.Vector()，然后在代码需要的地方直接调用变量名就可以了；原因二：在定义矢...

OpenLayers - 创建多边形Polygon

weixin_34195142的博客

10-08

8318

OpenLayers版本：4.6.4 叨叨：本来这不应该成为一个问题，也不值得专门写一篇文章，尤其是对一个已经用过各种MapAPI（Google、百度、高德、SmartEarth...）的人来说，但就是这个本来以为3分钟解决的问题我却用了至少30分钟才把坑填完，最后发现OpenLayers的好多设计理念、思路都和之前用过的API大不相同。需求：需求很简单，其实就是用代码把一串经纬度坐标表示的...