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

前章知识点

（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的参数用下表来阐述。

参数名	类型	默认值	说明
color	String	#3388ff	折线颜色（支持 HEX、RGB、颜色名称，如 'red'、'#ff0000）。
weight	Number	3	折线宽度（单位：像素）。
opacity	Number (0~1)	1.0	折线透明度（0 为完全透明，1 为不透明）。
lineCap	String	round	线段端点的形状（可选 round、butt、square）。
lineJoin	String	round	线段连接处的形状（可选 round、miter、bevel）。
dashArray	String	null	虚线样式（如 10 表示 10px 实线 + 10px 空白，循环）。
dashOffset	String	null	虚线起始偏移量（如 10 表示从第 10px 开始绘制）。
smoothFactor	Number	1.0	折线平滑系数（值越大，路径简化越多，性能优化但精度降低）。
noClip	Boolean	false	是否禁用折线在视图外的裁剪（设为 true 可提升长路径性能）。
className	String	null