064：vue+openlayers根据坐标来显示点、线段、圆形、多边形（代码示例）

桃扇骨 2024-04-08 08:55 93阅读 0赞

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center]

第064个

[点击查看专栏目录][Link 1]

本示例的目的是介绍演示如何在vue+openlayers项目中根据坐标信息来显示点、线段、圆形以及多边形。  
**直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果； 注意如果OpenStreetMap无法加载，请加载其他来练习**

#### 示例效果 ####

![3a118a13873410869480081a6a788a76.gif][]

#### 配置方式 ####

1）查看基础设置：https://xiaozhuanlan.com/topic/1378924560  
或者同样查看：[https://blog.csdn.net/cuclife/article/details/126195754][https_blog.csdn.net_cuclife_article_details_126195754]  
2）将上述的源代码，粘贴到**src/views/Home.vue**中，**npm run serve</**

[a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/a562102eea1b443d8d9bb51a808fa2d6.png
[Link 1]: https://blog.csdn.net/cuclife/article/details/126706466
[3a118a13873410869480081a6a788a76.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/dbecb5e20f5c44908a5bb738b96960cd.gif
[https_blog.csdn.net_cuclife_article_details_126195754]: https://blog.csdn.net/cuclife/article/details/126195754

发表评论取消回复

表情：

评论列表（有 0 条评论，93人围观）

还没有评论，来说两句吧...

相关阅读

相关 064：vue+openlayers根据坐标来显示点、线段、圆形、多边形（代码示例）

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第064个 [点击查看专栏目录][Link 1]

桃扇骨/ 2024年04月08日 08:55/ 0 赞/ 94 阅读

相关 061：vue+openlayer画点、线、圆、多边形（代码示例）

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第061个 [点击查看专栏目录][Link 1]

待我称王封你为后i/ 2024年04月08日 08:54/ 0 赞/ 91 阅读

相关 leaflet移动鼠标显示经纬度坐标（示例代码012）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第012个 [点击查看专栏目录][Link 1]

╰+哭是因爲堅強的太久メ/ 2024年04月07日 15:35/ 0 赞/ 99 阅读

相关 leaflet 点击鼠标显示经纬度坐标信息（示例代码011）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第011个 [点击查看专栏目录][Link 1]

逃离我推掉我的手/ 2024年04月07日 15:35/ 0 赞/ 93 阅读

相关 169：vue+openlayers 根据多边形坐标，获取面积值

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第169个 [点击查看专栏目录][Link 1]

短命女/ 2024年04月01日 15:50/ 0 赞/ 89 阅读

相关 023：cesium 根据坐标，显示多边形Polygon

![在这里插入图片描述][8e6fb03228114687897d406ccc58f3ed.png_pic_center] 第023个 [点击查看专栏目录][Link 1]

蔚落/ 2024年03月26日 16:41/ 0 赞/ 91 阅读

相关 cesium: 根据坐标值，显示点（011）

![在这里插入图片描述][8e6fb03228114687897d406ccc58f3ed.png_pic_center] 第011个 [点击查看专栏目录][Link 1]

电玩女神/ 2024年03月26日 15:16/ 0 赞/ 100 阅读

相关 Openlayers实战：回显点、线段、圆形、多边形

Openlayers地图中，回显数据到地图上，形成几何图形是非常重要的一部分学习内容。回显的内容基本单元包括点、线、圆形、多边形。本实战项目中，根据给定的坐标点，用最基础最管

迷南。/ 2024年03月17日 16:35/ 0 赞/ 51 阅读

相关获取地图多边形点坐标

一、百度地图AK密钥申请 1、密钥申请地址：http://lbsyun.baidu.com/apiconsole/key 2、密钥申请配置：（1）应用类型：浏览器端；

水深无声/ 2023年03月14日 05:30/ 0 赞/ 323 阅读

相关 ArcGis显示点，线，和多边形

将图形叠加添加到地图视图 1. 在文件app > java > \{your.package.name\} > MainActivity.java中，创建一个新的成员变量来

╰半夏微凉°/ 2022年04月25日 03:08/ 0 赞/ 340 阅读