【Leaflet.js实战】路径绘制与多边形：L.Polyline/L.Polygon/L.Circle 完整实现指南

前言：路径和多边形是地图应用的重要功能。本文将深入讲解Leaflet中L.Polyline、L.Polygon、L.Circle的使用方法，从基础绘制到高级编辑，助你掌握地图几何图形处理。

一、L.Polyline 路径绘制

1.1 基础路径创建

// 简单路径绘制
const polyline = L.polyline([
    [39.9042, 116.4074], // 起点
    [39.9142, 116.4174], // 中间点
    [39.9242, 116.4274]  // 终点
]).addTo(map);

// 带样式的路径
const styledPolyline = L.polyline([
    [39.9042, 116.4074],
    [39.9142, 116.4174],
    [39.9242, 116.4274]
], {
   
   
    color: 'red',        // 线条颜色
    weight: 5,           // 线条宽度
    opacity: 0.8,        // 透明度
    smoothFactor: 1.0,   // 平滑因子
    lineCap: 'round',    // 线条端点样式
    lineJoin: 'round'   // 线条连接样式
}).addTo(map);

1.2 路径样式配置

// 不同样式的路径配置
const pathStyles = {
   
   
    highway: {
   
   
        color: '#ff6b6b',
        weight: 6,
        opacity: 0.8,
        lineCap: 'round',
        lineJoin: 'round'
    },
    street: {
   
   
        color: '#4ecdc4',
        weight: 3,
        opacity: 0.7,
        lineCap: 'round',
        lineJoin: 'round'
    },
    walking: {
   
   
        color: '#45b7d1',
        weight: 2,
        opacity: 0.6,
        dashArray: '10, 10', // 虚线样式
        lineCap: 'round'
    }
};

// 应用样式
const highwayPath = L.polyline(coordinates, pathStyles.highway).addTo(map);
const streetPath = L.polyline(coordinates, pathStyles.street).addTo(map);
const walkingPath = L.polyline(coordinates, pathStyles.walking).addTo(map);

1.3 路径动画效果

// 路径动画实现
class AnimatedPolyline {
   
   
    constructor(map, coordinates, options = {
    
    }) {
   
   
        this.map = map;
        this.coordinates = coordinates;
        this.options = {
   
   
            color: '#ff6b6b',
            weight: 4,
            opacity: 0.8,
            duration: 2000,
            ...options
        };
        this.polyline = null;
    }
    
    // 开始动画
    animate() {
   
   
        this.polyline = L.polyline([], this.options).addTo(this.map);
        
        const startTime = Date.now();
        const totalPoints = this.coordinates.length;
        
        const animate = () => {
   
   
            const elapsed = Date.now() - startTime;
            const progress = Math.min(elapsed / this.options.duration, 1);
            const currentPoints = Math.floor(progress * totalPoints);
            
            const currentPath = this.coordinates.slice(0, currentPoints + 1);
            this.polyline.setLatLngs(currentPath);
            
            if (progress < 1) {
   
   
                requestAnimationFrame(animate);
            }
        };
        
        animate();
    }
    
    // 停止动画
    stop() {
   
   
        if (this.polyline) {
   
   
            this.map.removeLayer(this.polyline);
        }
    }
}

// 使用路径动画
const animatedPath = new AnimatedPolyline(map, routeCoordinates, {
   
   
    color: '#4CAF50',
    weight: 3,
    duration: 3000
});
animatedPath.animate();

二、L.Polygon 多边形绘制

2.1 基础多边形创建

// 简单多边形
const polygon = L.polygon([
    [39.9042, 116.4074], // 顶点1
    [39.9142, 116.4074], // 顶点2
    [39.9142, 116.4174], // 顶点3
    [39.9042, 116.4174]  // 顶点4
]).addTo(map);

// 带样式的多边形
const styledPolygon = L.polygon([
    [39.9042, 116.4074],
    [39.9142, 116.4074],
    [39.9142, 116.4174],
    [39.9042, 116.4174]
], {
   
   
    color: '#ff6b6b',      // 边框颜色
    weight: 2,             // 边框宽度
    opacity: 0.8,          // 边框透明度
    fillColor: '#ff6b6b',  // 填充颜色
    fillOpacity: 0.3,      // 填充透明度
    lineCap: 'round',      // 边框端点样式
    lineJoin: 'round'      // 边框连接样式
}).addTo(map);

2.2 复杂多边形（带洞）

// 带洞的多边形
const polygonWithHole = L.polygon([
    // 外边界
    [
        [39.9042, 116.4074],
        [39.9142, 116.4074],
        [39.9142, 116.4174],
        [39.9042, 116.4174]
    ],
    // 内洞
    [
        [39.9072, 116.4104],
        [39.9112, 116.4104],
        [39.9112, 116.4144],
        [39.9072, 116.4144]
    ]
], {
   
   
    color: '#ff6b6b',
    weight: 2,
    opacity: 0.8,
    fillColor: '#ff6b6b',
    fillOpacity: 0.3
}).addTo(map);

2.3 多边形面积计算

// 面积计算工具
class PolygonCalculator {
   
   
    // 计算多边形面积（平方米）
    static calculateArea(coordinates) {
   
   
        let area = 0;
        const n = coordinates.length;
        
        for (let i = 0; i < n; i++) {
   
   
            const j = (i + 1) % n;
            area += coordinates[i][1] * coordinates[j][0];
            area -= coordinates[j][1] * coordinates[i][0];
        }
        
        area = Math.abs(area) / 2;