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 1792
本示例的目的是介绍演示如何在vue+leaflet中添加多个marker，每个marker自定义自己的icon图片，多个marker，多个不同的图片。点击查看本专栏内容目录列表。
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 3517
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
leaflet 实现地图上标记的发散闪烁动画-最新
m0_73008551的博客
05-15 685
leaflet 实现地图上标记的发散闪烁动画
源码分析之Leaflet中CircleMarker
最新发布
Jinuss的博客
05-19 500
Leaflet中的CircleMarker类继承自Path，用于创建固定像素大小的圆形标记。其核心功能包括位置和半径的操作、样式覆盖、坐标转换、边界计算以及路径更新。CircleMarker通过_project()方法将地理坐标转换为图层像素坐标，并通过_updateBounds()方法更新边界，优化渲染性能。此外，CircleMarker支持交互检测，如点击事件，并通过_updateCircle方法委托具体渲染逻辑，实现SVG和Canvas的无缝切换。与Circle类相比，CircleMarker的半径单
011：vue+leaflet 点击鼠标显示经纬度坐标信息
大剑师兰特的GIS世界
09-14 1482
本示例的目的是介绍演示在vue+leaflet中点击鼠标，显示点击位置的经纬度信息。点击查看本专栏内容目录列表。
leaflet学习笔记-带有方位角信息的圆的绘制（七）
花姐夫JUN的博客
01-10 1536
项目中有一个需求，就是需要绘制一个圆，并且绘制的时候还要设置方位角，最后返回圆的坐标集合和方位角。本功能使用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 620
本示例的目的是介绍演示如何在vue+leaflet中画圆形，这里使用的是circle的api方法。同时文中也介绍了circle 和circleMarker的区别问题。点击查看本专栏内容目录列表。
111：vue+leaflet自定义绘制，画多边形、折线、圆形、marker、矩形
大剑师兰特的GIS世界
03-05 1687
第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 7115
使用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 1508
动态绘多边形主要涉及到三个事件: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 5269
加载完地图后，加载点、线、面应该是最基本的功能之一了。 <!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、绘制同心圆 //绘制同心圆 //...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值