228：vue+openlayers绘制多边形，drawend获取到多边形的所有点坐标

已于 2024-05-08 23:22:03 修改
阅读量1.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： # openlayers综合教程300+ 文章标签： openlayers获取坐标点 大剑师 openlayers自学 openlayers绘制 openlayers教程
于 2023-03-22 14:31:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/129709103
该博客由大剑师兰特撰写，展示了如何在Vue应用中使用OpenLayers绘制多边形并在drawend事件中获取所有顶点坐标。通过过滤掉重复的起始和结束点，实现对多边形完整坐标的获取。提供源代码示例和相关文章参考。

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

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 228个示例

文章目录

一、示例效果图

二、示例简介

本示例介绍如何在vue+openlayer中使用draw绘制多边形，drawend获取到多边形的所有点坐标。 这里主要是通过geometry来获取坐标点。通过filter来去除第一个点坐标，因为收尾坐标是同一个。

直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果

三、配置方式

1

了解本专栏 订阅专栏 解锁全文
123.在 Vue3 中使用 OpenLayers 实现绘制 Draw 多边形并 Modify 编辑图形
小彭的博客
04-25 259
在 GIS 开发中，绘制图形并进行修改是非常常见的基础能力。无论是测量面积、标记区域、还是画草图，用户都需要在地图上自由绘制图形并进行后续的编辑操作。本文将使用实现如下功能：✅ 在地图上绘制多边形✅ 支持图形绘制的开始/结束✅ 支持图形的修改与取消修改✅ 使用 Vue 3 Composition API 编写，结构清晰，利于维护通过本文，我们完成了一个基于 Vue3 + OpenLayers 的实用小功能 ——绘制并编辑图形，它可以作为 GIS 系统、地图标绘、空间分析等功能的基础模块。
134.在 Vue3 中使用 OpenLayers 根据坐标点数组绘制多边形并显示面积数
最新发布
小彭的博客
06-03 211
摘要：本文介绍了一个基于Vue3和OpenLayers实现的地图多边形绘制与面积计算系统。该项目主要功能包括：加载OSM底图、根据坐标绘制多边形、计算面积（平方公里）并以弹窗显示、支持图层清除。技术栈采用Vue3+scriptsetup、OpenLayers v8+和ElementPlus。文章详细展示了代码结构，包含地图初始化、多边形绘制、面积计算和弹窗交互的实现方法，同时提供了坐标转换、单位换算等技术要点说明。最后还提出了支持GeoJSON、多图层叠加等进阶优化方向，为开发者提供了完整的地图功能实现参考
OpenLayers 3 地图框选 画多边形 获取坐标 实例
12-01
OpenLayers 3 地图框选 Draw 画多边形 Polygon 获取坐标
OpenLayers画多边形
divi
09-19 763
<!DOCTYPE html> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">         <meta name="viewport" content="widt
openLayers--绘制多边形、获取视图的中心点、获取当前地图等级、设置地图等级
m0_50207524的博客
11-04 1931
上一篇文章在vue项目中绘制了openlayers绘制了地图和标记点，本篇文章讲解openlayers绘制多边形通过LineString来进行绘制、获取视图的中心位置、获取当前地图等级// 定义多边形}),width: 4,}),})},
openlayers绘制点、圆、多边形
qq_46005282的博客
02-26 938
我用的是4326坐标系，有些地方和3857坐标系不一样思维导图是大佬整理的，我拿来用了。
openlayers学习二：画多边形
weixin_39520640的博客
07-19 1129
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>画多边形</title> <script src="dist/ol.js"></script> <link rel="styl...
Vue + Openlayers 绘制多边形及展示
c153284575的博客
06-30 3706
<template> <div class="map-warp"> <h3> <a href="https://openlayers.org/en/latest/examples/tracing.html" target="_bank">Openlayers多边形</a> </h3> <el-row :gutter="10"> <el-col :span="5"&g.
231：vue+openlayers绘制点、点击此点弹出坐标复制和取消功能
大剑师兰特的GIS世界
04-11 1135
第231个本示例的目的是介绍演示如何在vue+openlayers项目绘制点、点击此点弹出坐标复制和取消功能，这里面的复制功能采用了ue-clipboard2插件。
Vue+OpenLayers实现多边形绘制及转折点样式标识
TechNovaX的博客
09-04 356
OpenLayers是一款开源的JavaScript库，用于在Web浏览器中显示交互地图。而Vue.js是一款流行的JavaScript框架，用于构建用户界面。结合使用这两个工具，我们可以轻松地实现多边形的绘制和样式标识。本文介绍了如何使用Vue.js和OpenLayers库来实现多边形的绘制，并通过在每个转折点上添加圆点标识来增强其可视化效果。我们创建了一个Vue组件，初始化了地图和绘制功能，并为每个转折点添加了样式标识。希望本文对你理解如何在Vue项目中使用OpenLayers进行地图绘制有所帮助。
242：vue+Openlayers 绘制点，导出CSV文件
大剑师兰特的GIS世界
08-01 558
第242个本示例的目的是介绍演示如何在vue+openlayers绘制点，导出CSV（Comma Separated Values）形式的文件。如果文件仅包含点要素，则会添加经度和纬度列。否则，类型列将添加一个坐标列，其中包含所有以 JSON 数组形式归档的坐标。
openlayers在线绘制
08-24
在线绘制折线，多边形，并且返回相应的绘制后坐标，进行3857或4326坐标转换
openlayer绘制多边形
大家好，我是+V
03-28 3387
openlayer 绘制多边形 /*** 绘制多边形 points：多边形顶点组成的列表 */ drawPolygon(points) { let layer = this.getLayerFromMap(this.map, 'polygon') // 先查看一下之前是否存在，如果存在先移除 if (layer) { this.map.removeLayer(layer) } let
openlayer 绘制点，线，面（多边形），圆。获得坐标数据。地图信息编辑器。
PrimaryColor
02-01 2192
【代码】openlayer 绘制点，线，面（多边形），圆。获得坐标数据。地图信息编辑器。
Vue+OpenLayers实现绘制和编辑多边形
CodeWhizZ的博客
08-30 893
而OpenLayers是一个功能强大的开源地图库，可以方便地集成地图和地理空间数据的展示与交互。通过以上代码和配置，我们可以轻松地利用Vue.js和OpenLayers实现绘制和编辑多边形的功能。至此，我们已经完成了Vue+OpenLayers绘制和编辑多边形的功能。在上面的代码中，我们首先引入了OpenLayers的必要模块和样式。最后，将这些交互对象添加到地图实例中，就可以实现绘制和编辑多边形的功能了。的Vue组件，在该组件中引入OpenLayers库和样式，并初始化地图。在这里，我们选择绘制多边形(
openlayers 绘图功能，绘制多边形，draw组件的使用，一个简单的需求引发的思考（二）
无心使然云中漫步
06-11 528
上一篇是使用openlayers原生实现的，这一节使用实现(有轮子真好)
openlayers：实现画多边形（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 457
openlayers：实现画多边形（附完整源码）
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2416
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
vue canvas 绘制多个多边形，并且可以根据坐标数据回显
weixin_42178050的博客
04-07 2200
vue canvas 绘制多个多边形，并且可以根据坐标数据回显
openlayers绘制多边形
06-08
要使用OpenLayers绘制多边形，可以按照以下步骤进行操作： 1. 创建一个OpenLayers地图对象： ``` var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 4 }) }); ``` 2. 创建一个绘制图层和一个绘制交互对象： ``` var source = new ol.source.Vector({wrapX: false}); var vector = new ol.layer.Vector({ source: source }); map.addLayer(vector); var draw = new ol.interaction.Draw({ source: source, type: 'Polygon' }); map.addInteraction(draw); ``` 3. 监听绘制结束事件并获取多边形的坐标数组： ``` var coordinates = []; draw.on('drawend', function(event) { var feature = event.feature; var geometry = feature.getGeometry(); var coord = geometry.getCoordinates()[0]; coordinates = coord; }); ``` 4. 将多边形坐标数组用于其他操作，例如显示多边形信息： ``` var info = document.getElementById('info'); info.innerHTML = ''; for (var i = 0; i < coordinates.length; i++) { info.innerHTML += 'Point ' + (i+1) + ': ' + coordinates[i] + '<br>'; } ``` 以上是OpenLayers绘制多边形的基本步骤，可以根据需要进行自定义和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值