Leaflet学习文档-点(Point)/线(Line)/多边形(Polygon)/圆(Circle)绘制

已于 2025-03-04 19:02:55 修改
阅读量1.4k 收藏 10
点赞数 40
分类专栏： Leaflet 文章标签： 学习 前端 javascript 经验分享
于 2025-03-04 18:31:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiuyu_lj/article/details/146010303
版权

前章知识点

（1）Leaflet学习文档-初识
（2）Leaflet学习文档-加载底图
（3）Leaflet学习文档-Map使用说明
（4）Leaflet学习文档-Marker标注点
（5）Leaflet学习文档-Popup(弹窗框）和Tooltip（提示框）学习

文章目录

前言

在Leaflet中，点通常用Marker来表示。需要提到[如何创建Marker，设置图标可参考前文，也可以使用常规的方式来设置对应的点位。

然后是线，也就是折线。使用L.polyline来创建，需要纬经度坐标数组的结构，本文将涉及如何设置线的颜色、粗细、虚线等样式。

接下来是面，即多边形。这包括多边形和矩形，使用L.polygon。需要纬经度坐标数组的结构，尤其是多边形需要闭合，比如第一个和最后一个点相同。同样要涉及样式设置，比如填充颜色、边框等。此外，矩形作为多边形的一种特殊情况，可以用L.rectangle来创建。

一、点

通常我们在使用点会利用Marker或者DivIcon方式来表示，基本满足项目使用，但如果需要纯点位可以利用Circle来实现（可参考第三节），该方法也可以实现圆，但只要圆的半径足够小，在地图上显示即为点为信息。

参考文档：Leaflet学习文档-Marker标注点

// 简单使用
const marker = L.marker([39.90002, 116.46]).addTo(map);

在这里插入图片描述

二、线

1. Polyline类

L.Polyline 是 Leaflet 中用于创建折线图层的类。可以通过传入一组坐标点来定义折线的形状，并支持多种可选参数来自定义样式和行为

Polyline类参数说明：

// 定义坐标点数组（纬经度）
// 数组里面为纬度在前，经度在后
 let points = [
   [39.90, 116.36],
   [39.90, 116.46],
   [39.90, 116.56]
 ];

// 创建折线
const polyline = L.polyline(points, {
   // 折线颜色（支持 HEX、RGB、颜色名称，如 'red'、'#ff0000'）
    color: '#ff0000',
    // 折线宽度（单位：像素）
    weight: 5,
    // 折线透明度（0 为完全透明，1 为不透明）。
    opacity: 1,
    // 线段端点的形状（可选 'round'、'butt'、'square'）
    lineCap: 'square',
    // 线段连接处的形状（可选 'round'、'miter'、'bevel'）
    lineJoin: 'round',
    // 虚线样式（如 '10' 表示 10px 实线 + 10px 空白，循环）
    dashArray: '10',
    // 虚线起始偏移量（如 '10' 表示从第 10px 开始绘制）。
    dashOffset: '0',
    // 折线平滑系数（值越大，路径简化越多，性能优化但精度降低）。
    smoothFactor: 1,
    // 是否禁用折线在视图外的裁剪（设为 true 可提升长路径性能）
    noClip: false,
    // 自定义 CSS 类名，用于覆盖默认样式
    className: ''
}).addTo(map);	

// 缩放地图以适应线条范围
// map.fitBounds(polyline.getBounds());

2. Polyline类说明

Polyline类的使用方式一般为L.polyline([[纬度,经度],[纬度,经度],...], 参数).addTo(map)的方式进行加载，Polyline的参数用下表来阐述。

参数名类型默认值说明
colorString#3388ff折线颜色（支持 HEX、RGB、颜色名称，如 'red'、'#ff0000）。
weightNumber3折线宽度（单位：像素）。
opacityNumber (0~1)1.0折线透明度（0 为完全透明，1 为不透明）。
lineCapStringround线段端点的形状（可选 round、butt、square）。
lineJoinStringround线段连接处的形状（可选 round、miter、bevel）。
dashArrayStringnull虚线样式（如 10 表示 10px 实线 + 10px 空白，循环）。
dashOffsetStringnull虚线起始偏移量（如 10 表示从第 10px 开始绘制）。
smoothFactorNumber1.0 折线平滑系数（值越大，路径简化越多，性能优化但精度降低）。
noClipBooleanfalse 是否禁用折线在视图外的裁剪（设为 true 可提升长路径性能）。
classNameStringnull自定义 CSS 类名，用于覆盖默认样式。

Polyline设置颜色，虚线，透明度效果

在这里插入图片描述

3. 拓展

Polyline可以画单条线也可以绘制多条线，若无特殊处理，多线段样式一致，使用方式L.polyline([线段1纬经度数组,线段2纬经度数组])

let points= [
	// 线段1
    [
      [39.90, 116.36],
      [39.90, 116.46],
      [39.90, 116.56]
    ],
    // 线段2
    [
    	[39.85, 116.36],
      	[39.85, 116.46],
     	[39.85, 116.56]
   	]
];

const polyline = L.polyline(points, {color: 'red'}).addTo(map)

二、面

1. Polygon类

L.Polygon 是 Leaflet 中用于创建多边形图层的类。可以通过传入一组坐标点来定义多边形的形状，并支持多种可选参数来自定义样式和行为。

Polygon类参数说明：

// 定义坐标点数组（纬经度）
// 数组里面为纬度在前，经度在后
 let points = [
   [39.90, 116.36],
   [39.90, 116.46],
   [39.80, 116.46],
   [39.80, 116.36]
 ];

// 创建折线
const polygon= L.polygon(points, {
	// 是否绘制边框
    stroke: true,
    // 边框颜色            
    color: 'red',   
    // 边框宽度（像素）            
    weight: 5, 
    // 边框透明度（0 到 1）                 
    opacity: 0.8,   
    // 是否填充内部区域      
    fill: true,       
    // 填充颜色          
    fillColor: '#ff0033',      
    // 填充透明度（0 到 1）    
    fillOpacity: 0.5,     
    // 边框虚线模式      
    dashArray: '10',  
    // 边框线端点样式（round, butt, square）       
    lineCap: 'round',     
    // 边框线连接点样式（round, bevel, miter）      
    lineJoin: 'round',     
    // 自定义 CSS 类名     
    className: '',
}).addTo(map)

// 缩放地图以适应线条范围
// map.fitBounds(polygon.getBounds());

2. Polygon类说明

Polygon类的使用方式一般为L.polygon([[纬度,经度],[纬度,经度],...], 参数).addTo(map)的方式进行加载，Polygon的参数用下表来阐述。

参数名类型默认值说明
strokeBooleantrue是否绘制多边形的边框。
colorString#3388ff边框颜色（CSS 颜色值）。
weightNumber3边框宽度（以像素为单位）。
opacityNumber1.0边框透明度（范围为 0 到 1）。
fillBooleantrue是否填充多边形内部区域。
fillColorString color填充颜色（默认与边框颜色相同）。
fillOpacityNumber0.2填充区域的透明度（范围为 0 到 1）。
dashArrayStringnull虚线样式（如 10 表示 10px 实线 + 10px 空白，循环）。
dashOffsetStringnull虚线起始偏移量（如 10 表示从第 10px 开始绘制）。
lineCapStringround边框线端点样式（round, butt, 或 square）。
lineJoinStringround边框线连接点样式（round, bevel, 或 miter）。
classNameStringnull自定义 CSS 类名，用于覆盖默认样式。

Polygon设置颜色，虚线，透明度效果

在这里插入图片描述

3. Polygon拓展

Polygon可以画单个多边形也可以绘制多个多边形，还可以绘制环形多边形，若无特殊处理，多线段样式一致，使用方式L.Polygon([多边形1纬经度数组,多边形2纬经度数组])

let points= [
	// 多边形1
    [
       [39.90, 116.36],
	   [39.90, 116.46],
	   [39.80, 116.46],
	   [39.80, 116.36]
    ],
    // 多边形2
    [
    	[39.70, 116.36],
      	[39.70, 116.46],
      	[39.60, 116.46]
   	]
];

const polygon= L.polygon(points, {color: 'red'}).addTo(map)

// 环状面要素
let latlngs = [
  [
  	  [39.90, 116.36],
	  [39.90, 116.46],
	  [39.80, 116.46],
	  [39.80, 116.36]
  ], // outer ring
  [
  	  [39.88, 116.38],
	  [39.88, 116.44],
	  [39.82, 116.44],
	  [39.82, 116.38]
 ] // hole
];

const polygon2 = L.polygon(latlngs , {color: '#00ff00'}).addTo(map)

环状面要素展示

在这里插入图片描述

4. Rectangle类

L.Rectangle` 是 Leaflet 中用于创建矩形图层的类。可以通过传入一组坐标点来定义折线的形状，并支持多种可选参数来自定义样式和行为

Rectangle类参数说明：

// 定义坐标点数组（纬经度）
// 数组里面为纬度在前，经度在后
 let points = [
 	// 左下角纬经度
   [39.80, 116.36],
   // 右上角纬经度
   [39.90, 116.46]
 ];

// 创建折线
const rectangle = L.polygon(points, {
	// 是否绘制边框
    stroke: true,
    // 边框颜色            
    color: 'red',   
    // 边框宽度（像素）            
    weight: 5, 
    // 边框透明度（0 到 1）                 
    opacity: 0.8,   
    // 是否填充内部区域      
    fill: true,       
    // 填充颜色          
    fillColor: '#ff0033',      
    // 填充透明度（0 到 1）    
    fillOpacity: 0.5,     
    // 边框虚线模式      
    dashArray: '10',  
    // 边框线端点样式（round, butt, square）       
    lineCap: 'round',     
    // 边框线连接点样式（round, bevel, miter）      
    lineJoin: 'round',     
    // 自定义 CSS 类名     
    className: '',
}).addTo(map)

// 缩放地图以适应线条范围
// map.fitBounds(rectangle.getBounds());

5. Rectangle类说明

Rectangle类的使用方式一般为L.Rectangle([[左下角纬度,左下角经度],[右上角纬度,右上角经度]], 参数).addTo(map)的方式进行加载，Rectangle的参数用下表来阐述。

参数名类型默认值说明
strokeBooleantrue是否绘制多边形的边框。
colorString#3388ff边框颜色（CSS 颜色值）。
weightNumber3边框宽度（以像素为单位）。
opacityNumber1.0边框透明度（范围为 0 到 1）。
fillBooleantrue是否填充多边形内部区域。
fillColorString color填充颜色（默认与边框颜色相同）。
fillOpacityNumber0.2填充区域的透明度（范围为 0 到 1）。
dashArrayStringnull虚线样式（如 10 表示 10px 实线 + 10px 空白，循环）。
dashOffsetStringnull虚线起始偏移量（如 10 表示从第 10px 开始绘制）。
lineCapStringround边框线端点样式（round, butt, 或 square）。
lineJoinStringround边框线连接点样式（round, bevel, 或 miter）。
classNameStringnull自定义 CSS 类名，用于覆盖默认样式。

Rectange设置颜色，虚线，透明度效果在这里插入图片描述

三、圆

1. Circle类

L.Circle 是 Leaflet 中用于创建圆图层的类。可以通过传入坐标和半径来确定圆，并支持多种可选参数来自定义样式和行为。

Circle类参数说明：

// 定义坐标点数组（纬经度）
 let points = [39.90, 116.46];

// 创建折线
const circle = L.circle(points, {
	// 圆半径
	radius: 1000,
	// 是否绘制边框
    stroke: true,
    // 边框颜色            
    color: 'red',   
    // 边框宽度（像素）            
    weight: 5, 
    // 边框透明度（0 到 1）                 
    opacity: 0.8,   
    // 是否填充内部区域      
    fill: true,       
    // 填充颜色          
    fillColor: '#ff0033',      
    // 填充透明度（0 到 1）    
    fillOpacity: 0.5,     
    // 边框虚线模式      
    dashArray: '10',  
    // 边框线端点样式（round, butt, square）       
    lineCap: 'round',     
    // 边框线连接点样式（round, bevel, miter）      
    lineJoin: 'round',     
    // 自定义 CSS 类名     
    className: '',
}).addTo(map)

// 缩放地图以适应线条范围
// map.fitBounds(circle.getBounds());

2. Circle类说明

Circle类的使用方式一般为L.Circle([纬度,经度], 参数).addTo(map)的方式进行加载或者L.Circle([纬度,经度], 半径, 参数).addTo(map)，Circle的参数用下表来阐述。

参数名类型默认值说明
radiusNumber是否绘制多边形的边框。
strokeBooleantrue是否绘制多边形的边框。
colorString#3388ff边框颜色（CSS 颜色值）。
weightNumber3边框宽度（以像素为单位）。
opacityNumber1.0边框透明度（范围为 0 到 1）。
fillBooleantrue是否填充多边形内部区域。
fillColorString color填充颜色（默认与边框颜色相同）。
fillOpacityNumber0.2填充区域的透明度（范围为 0 到 1）。
dashArrayStringnull虚线样式（如 10 表示 10px 实线 + 10px 空白，循环）。
dashOffsetStringnull虚线起始偏移量（如 10 表示从第 10px 开始绘制）。
lineCapStringround边框线端点样式（round, butt, 或 square）。
lineJoinStringround边框线连接点样式（round, bevel, 或 miter）。
classNameStringnull自定义 CSS 类名，用于覆盖默认样式。

Cirle设置颜色，虚线，透明度效果

在这里插入图片描述

总结

本文主要阐述点，线，多边形等设置。

  1. 点使用
  2. 线使用
  3. 多边形使用
  4. 圆使用

具体使用可以参考本文
016：vue+ leaflet 使用Polygon画嵌套多边形，一个数组多条数据
大剑师兰特的GIS世界
09-15 759
本示例的目的是介绍演示如何在vue+leaflet中嵌套多边形，这里使用的是Polygon的api方法。请注意，您在创建多边形时传递的最后一个点不应该和第一个相同。传递一个latlngs的数组，第一个数组代表外部形状，其他数组代表外部形状中的孔。点击查看本专栏内容目录列表。
58.（leaflet篇）leaflet轨迹线.zip
12-23
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.youkuaiyun.com/QQ98281642/article/details/122099223
《Leaflet 进阶知识点》- L.polygon 多边形绘制详解
前端技术
08-11 5239
分类 单个简单多边形 单个多边形，且有孔 多个多边形，可有孔或无孔 官网说明如下： 示例 1.单个简单多边形 // 坐标点多边形（二维数组），注意 第一个 与 最后一个点无需一样，会自动闭合 var latlngs = [ [31.537628173828125,121.190185546875], [30.878448486328125,121.19430541992188], [30.839996337890625,121.92901611328125],...
Leaflet 入门教程（十一）：显示各种图形
大剑师兰特的GIS世界
05-18 1097
在Leaflet中绘制各种图形是一项基础且强大的功能，可以满足地图应用的多种需求。下面我将依次介绍如何使用Leaflet来绘制Marker（标记）、Polyline（折线）、Polygon（多边形），以及如何创建带有箭头的线。
leaflet动态绘制圆、多边形
qq_42751928的博客
05-09 6924
使用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地图点线面（多边形）绘制、删除
maohangfei.cn
02-27 2605
leaflet绘制点线面
Leaflet学习文档-标注点
最新发布
02-28
Leaflet学习文档中关于标注点的介绍，不仅涵盖了创建标注点的基本方法，还包括了标注点的个性化设置以及交互功能的实现。通过深入学习这些内容，开发者可以有效地利用Leaflet来打造适合不同需求的地图应用。通过本...
Leaflet学习文档-Map使用说明
02-27
Leaflet学习文档-Map使用说明
Leaflet学习文档-加载底图天地图
02-26
Leaflet学习文档-加载底图天地图
使用leaflet在地图上绘制多个多边形
黄-小智的博客
07-09 2491
由于需要在地图上绘制大量的多边形，国内地图高德、百度等都有对应API可以使用，如果在国外就无法使用这些地图了，加上也会有偏移等问题，所以此时leaflet就发挥了很大的作用，提供了众多且强大的API等。 具体如何使用leaflet，因为比较基础，这里不详细说明，具体建议查看官网以及各大博主的博客 具体思路： 1.leaflet提供了在地图上绘制圆，多边形，矩形，折线等各种API 官网链接：链接: link. 其实思路很简单，只需要有对应位置的经纬度即可 直接上代码： // An highlighted b
在Vue中使用Leaflet 基础使用，绘制点，多边形，圆形，比列尺，单击事件（保姆级详解）
weixin_54586234的博客
09-03 4383
在Vue中使用Leaflet 基础使用，绘制点，多边形，圆形，比列尺，单击事件（保姆级详解）
《Leaflet 基础知识点》- 绘制圆、线、矩形和多边形
前端技术
07-14 4958
前言 注意绘制的都是矢量图层，所以在 Vector Layers 分类下： 绘制 圆 官网API 示例 // 圆：半径 radius 的单位为米 var circle = L.circle([31.537628173828125,121.190185546875], {radius: 2000}).addTo(map); // 跳到圆的范围 map.fitBounds(circle.getBounds()); 效果 线 官网API 示例 // 线：坐标点 var la...
《Leaflet 基础知识点》- 绘制点（两种方式）
前端技术
05-07 4160
前言 Leaflet 官方 API，有一个 L.point，但这并不是我们想要的。与L.circle、L.rectangle 和L.polygon 不一样。 从下图的 API 目录结构就能看出差异，L.point 在 Basic Types 中。 但...我们依旧能绘制出点，有两种方式： 一、L.circleMarker 方式 说明 API 地址 半径 radius 默认值是 10，缩放时不会改变它的大小，也是与 L.circle 有所区别； 默认样式是，带有蓝色实心边框且蓝色半透...
＜leaflet＞多边形绘制完成后修改样式
PDDcute的博客
06-15 767
leaflet地图上多个多边形实现点击Marker标记改变多边形透明度
【leaflet地图点线面（多边形）绘制、删除】
welcome to my blog!
09-30 3358
【leaflet地图点线面绘制、删除】
Leaflet 面的图片填充及渐变填充
qq_44749616的博客
12-01 1904
leaflet 面的填充
011：vue+leaflet 点击鼠标显示经纬度坐标信息
大剑师兰特的GIS世界
09-14 1381
本示例的目的是介绍演示在vue+leaflet中点击鼠标，显示点击位置的经纬度信息。点击查看本专栏内容目录列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值