013：vue+leaflet使用circleMarker画圆形

已于 2025-03-12 16:25:21 修改
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： leaflet示例 leaflet教程 leaflet画圆形 大剑师 leaflet入门教程
于 2022-09-14 11:51:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/126849871
本文由大剑师兰特分享，介绍如何在Vue项目中结合Leaflet使用circleMarker绘制圆形。示例包括配置方式、源代码展示及注意事项，帮助开发者快速实现效果。

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

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

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

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+leaflet中画圆形，这里使用的是circleMarker的api方法。

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

三、配置方式

1）查看基础设置：https://xiaozhuanlan.com/topic/4190537826
或者同样查看：

了解本专栏 订阅专栏 解锁全文
008：vue+leaflet自定义marker图标，每个点设置不同图片
大剑师兰特的GIS世界
09-13 1791
本示例的目的是介绍演示如何在vue+leaflet中添加多个marker，每个marker自定义自己的icon图片，多个marker，多个不同的图片。点击查看本专栏内容目录列表。
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 3514
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
leaflet 实现地图上标记的发散闪烁动画-最新
m0_73008551的博客
05-15 681
leaflet 实现地图上标记的发散闪烁动画
Leaflet根据坐标画圆形区域
最新发布
kongxx的专栏
05-24 331
在做地图应用时，有时需要根据指定的坐标来画一个圆形区域，比如签到打卡类的应用，此时我们可以使用。来在在指定坐标上创建一个圆并添加到的地图上，其中可以通过。
011：vue+leaflet 点击鼠标显示经纬度坐标信息
大剑师兰特的GIS世界
09-14 1480
本示例的目的是介绍演示在vue+leaflet中点击鼠标，显示点击位置的经纬度信息。点击查看本专栏内容目录列表。
leaflet学习笔记-带有方位角信息的圆的绘制（七）
花姐夫JUN的博客
01-10 1535
项目中有一个需求，就是需要绘制一个圆，并且绘制的时候还要设置方位角，最后返回圆的坐标集合和方位角。本功能使用Leaflet-Geoman+Turf.js+leaflet实现。在陆地导航中，方位角通常表示为 alpha、α，并定义为从北基线或子午线顺时针测量的水平角。方位角也被更广泛地定义为从任何固定参考平面或容易建立的基准方向线顺时针测量的水平角度。今天，方位角的参考平面通常是真北，测量为 0° 方位角，但也可以使用其他角度单位（grad、mil）。
leaflet circle
Sensation_cyq的博客
08-05 1917
L.circleMarker([lat, lon], { color: red, alt:companyName, opacity: 1,//透明度 stroke:false,//border展示不展示 fillColor:'#bbf'//只显示border  });
014：vue+leaflet 使用circle画随机颜色圆形
大剑师兰特的GIS世界
09-14 618
本示例的目的是介绍演示如何在vue+leaflet中画圆形，这里使用的是circle的api方法。同时文中也介绍了circle 和circleMarker的区别问题。点击查看本专栏内容目录列表。
111：vue+leaflet自定义绘制，画多边形、折线、圆形、marker、矩形
大剑师兰特的GIS世界
03-05 1685
第111个本示例的目的是介绍演示如何在vue+leaflet中自定义绘制工具，可以画多边形、折线、圆形、marker、矩形。
【vue+leaflet】自定义控件(五)
$
10-27 2165
imgBox {// 控件样式&:hover {// 取消按钮top: 0px;left: 31px;z-index: 2;// 鼠标指针important;// 门.name {left: 7px;top: 7px;
leaflet 综合教程150+ 【目录 】（已包含149篇文章）
热门推荐
大剑师兰特的GIS世界
09-07 1万+
vue+leaflet系列教程旨在为开发者提供简单快捷的，。在每一个示例中，解释相应的API知识点，做到。注意本示例目录中的内容可能加载是vue+openlayers的示例， 本目录是要加载vue+leaflet的示例，只是内容少，逐渐更新中。
leaflet椭圆绘制插件
04-02
leaflet没有直接绘制椭圆的接口，引用此插件可以方便的绘制椭圆。
Leaflet-semicircle:扩展Leaflet的圆形类以显示半圆形
05-28
传单半圆。 允许在传单地图上绘制半圆。 它是Leaflet的的扩展，并且如果显示几乎360度的半圆，其行为类似于L.Circle 。 已更新，可与传单1.1.0一起使用。 提供的课程： 提供的方法： L.SemiCircle / L.SemiCircleMarker 工厂： L.semiCircle / L.SemiCircleMarker 选项： startAngle ：半圆的起始角度stopAngle ：半圆的停止角角度的定义类似于指南针航向：0 =北，90 =东，依此类推。 L.SemiCircle.setStartAngle(angle) 将圆的起始角度设置为angle并重绘。 L.Circle.setStopAngle(angle) 将圆的停止角设置为angle并重画。 L.Circle.setDirection(direction, size) 将star
leaflet动态绘制圆、多边形
qq_42751928的博客
05-09 7111
使用leaflet在页面中动态的绘制一个圆形，主要需要解决的有两点，其一是如何确定圆的中心，其二是如何确定圆的半径。解决了这两点，剩下的就是把圆作为图层添加进map中了。 首先需要引入leaflet的js和CSS。 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KE
Leaflet——手动/动态绘制圆，线，多边形（单个及多个）
shsyzhzhgn的博客
09-20 1502
动态绘多边形主要涉及到三个事件:click,dbclick,mousemove;click确定多边形的角，dbclick确定多边形结束的角，mousemove绘制鼠标移动过程中多边形的变化;注意：单击事件和双击事件冲突，双击时执行两次单击事件；使用定时器解决，在单击事件函数里通过定时器控制延迟执行。单击事件函数和双击事件函数里都先清定时器。效果：双击第一次点击执行单击函数，第二次点击执行双击函数，思路：动态绘多边形主要涉及到三个事件:click,dbcl达到最后双击结束点也算多边形一角的效果。
使用Leaflet加载GeoJSON数据并随机显示不同颜色的CircleMarker
LdfcLoop的博客
09-16 710
在本文中，我将向您展示如何使用Leaflet加载GeoJSON数据，并在地图上随机显示不同颜色的CircleMarker。通过将HTML文件在浏览器中打开，您将看到一个地图，其中显示了加载的GeoJSON数据，并且每个要素都以随机颜色的CircleMarker进行了标记。在上面的代码中，我们引入了Leaflet的CSS和JavaScript文件，并创建了一个带有id为"map"的div元素，该元素将用于显示地图。在上面的代码中，我们首先创建了一个地图对象，并设置其初始视图。的函数，该函数用于生成随机颜色。
leaflet加载点、线、面、圆、圆形标注点
xu762102319的博客
03-26 5268
加载完地图后，加载点、线、面应该是最基本的功能之一了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="leaflet1.34/leaflet-src.js"&gt...
在leafet上画圆、多边形、线、矩形
weixin_72127453的博客
05-27 647
操作leaflet
Leaflet中绘制同心圆、多个中心对称多边形、平行四边形网格、矩形网格
BADAO_LIUMANG_QIZHI的博客
04-07 1238
场景 Leaflet快速入门与加载OSM显示地图： https://blog.youkuaiyun.com/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面加载地图显示的基础上，除了绘制基本图形还可以绘制其他图形。 注： 博客：https://blog.youkuaiyun.com/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、绘制同心圆 //绘制同心圆 //...
vue2-leaflet方法大全
12-17
vue2-leaflet是一个基于Vue.js的地图组件库，提供了丰富的地图操作方法和功能，下面是一些vue2-leaflet的方法大全： 1. Map：创建地图实例，设置地图属性，如中心点坐标、缩放级别等。 2. TileLayer：添加瓦片图层到地图上，支持各种地图类型，如OpenStreetMap、Google地图等。 3. Marker：在地图上添加标记点，可以自定义标记点的图标、弹出信息窗口等。 4. Popup：创建信息弹出窗口，用于在地图上展示相关信息或图片。 5. Polyline：绘制折线，可以设置折线的样式、颜色、粗细等。 6. Polygon：绘制多边形，支持设置多边形的样式、颜色、填充色等。 7. Circle：绘制圆形，可以设置圆形的样式、颜色、半径等。 8. ImageOverlay：添加图片图层到地图上，用于展示定位地图等功能。 9. GeoJSON：加载和展示GeoJSON数据，支持自定义样式、颜色等。 10. Control：添加地图控件，如比例尺、缩放控件、鹰眼控件等到地图上。 11. Events：支持地图的各种交互事件，如点击、拖拽、缩放等。 通过以上方法，我们可以轻松地在Vue.js项目中使用vue2-leaflet来创建交互式地图，展示地理信息数据，实现各种地图操作和功能。同时，vue2-leaflet还提供了丰富的文档和示例，方便开发者快速上手和定制化地图组件的样式和功能。可以说，vue2-leaflet是一个非常强大和灵活的地图库，适用于各种地图应用项目的开发和实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值