# Leaflet **Repository Path**: web_74/leaflet ## Basic Information - **Project Name**: Leaflet - **Description**: Leaflet 地图 gis 系统 https://leafletjs.cn/reference.html - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-04-12 - **Last Updated**: 2026-04-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Leaflet 中国地图 GIS 系统 ## 项目介绍 基于 Leaflet.js 开发的 Web GIS 地图系统，集成多种中国地图服务商（高德、腾讯、百度、天地图等）的瓦片服务，提供丰富的地图展示模式和交互功能示例。同时包含多种 Leaflet 插件案例，如雷达扫描、手势控制、侧边栏、按钮控件等。 ## 技术架构 ### 核心技术栈 - **Leaflet.js 1.9.3**: 开源 JavaScript 地图库，轻量级且功能强大 - **ECharts 5.4.3**: 数据可视化图表库 - **天地图 WMTS 服务**: 提供多种类型的地图瓦片服务 - **高德/腾讯/百度瓦片服务**: 国内主流地图服务商 - **HTML5/CSS3**: 现代化的网页结构和样式 ### 功能特性 #### 地图基础功能 - 🗺️ **多地图服务商**: 支持高德、腾讯、百度、天地图等多种地图 - 🗺️ **多底图切换**: 支持影像底图、矢量底图、地形晕影等多种底图 - 🏷️ **图层叠加**: 支持影像注记、矢量注记、地形注记、全球境界等叠加图层 - 📏 **比例尺控件**: 显示公制单位比例尺（米/千米） - 🎛️ **图层控制面板**: 可视化切换底图和覆盖图层 - 🖱️ **交互操作**: 支持拖拽平移、滚轮缩放、点击事件等交互功能 - 📊 **图表集成**: 支持在弹窗中显示 ECharts 图表 - 🎨 **自定义样式**: 支持自定义标记图标、弹窗样式 - 📱 **响应式设计**: 自适应不同屏幕尺寸 #### 绘制与编辑 - ✏️ **图形绘制**: 绘制多边形、圆形、矩形、线条等几何图形 - 📝 **图形编辑**: 编辑已有图形的形状和位置 - 📐 **地图测量**: 测量距离和面积 - 🚧 **电子围栏**: 创建和管理围栏区域 #### 标记与图标 - 📍 **自定义标记**: 使用 Font Awesome 创建精美标记图标 - 🎨 **图标样式**: 支持多种颜色和形状的标记图标 - 📊 **标记聚类**: 大量标记点自动聚类显示 - 🏃 **移动标记**: 标记点沿路径平滑移动动画 #### 可视化效果 - 🎯 **雷达扫描**: 地图中心雷达扫描动画效果 - 🔥 **热力图**: 点数据热力可视化 - 🐜 **蚂蚁线**: 流动虚线动画效果 - 🌊 **风场可视化**: 风场/洋流粒子动画 - � **图表叠加**: ECharts 图表与地图联动 - 🎬 **轨迹回放**: 轨迹路线动画播放 #### 地图控件 - �🖐️ **手势控制**: 支持触摸设备手势操作提示 - 📋 **侧边栏**: 可折叠的地图侧边栏面板 - 🔘 **快捷按钮**: 地图功能快捷操作按钮 - 🔍 **地图搜索**: 地点搜索和自动补全 - 📍 **定位功能**: 获取用户当前位置 - 🗺️ **小地图**: 鹰眼缩略图 - 📸 **截图打印**: 地图截图和打印功能 - 🎨 **样式化图层控制**: 美化的图层切换控件 - ⚖️ **分屏对比**: 左右分屏对比不同图层 #### 离线功能 - 💾 **离线地图**: 瓦片离线缓存和访问 - 📲 **缓存管理**: IndexedDB 存储管理 ## 项目结构 ``` leaflet/ ├── README.md # 项目说明文档（中文） ├── README.en.md # 项目说明文档（英文） │ ├── aMap/ # 高德地图示例 │ ├── index.html # 基础地图示例 │ ├── 2.html # 多图层切换示例 │ ├── 3 单击.html # 地图点击事件示例 │ ├── 4 标记.html # 自定义标记示例 │ ├── 4 绘制形状.html # 绘制多边形、圆形等形状 │ ├── 5 弹窗.html # 点击弹窗示例 │ ├── 6 弹窗 图表.html # 弹窗中显示 ECharts 图表 │ ├── plug.html # 高德地图插件使用示例 │ └── leaflet/ # Leaflet 本地资源 │ └── images/ # 标记图标图片 │ ├── marker-icon.png │ ├── marker-icon-2x.png │ └── marker-shadow.png │ ├── QQMap/ # 腾讯地图示例 │ └── index.html # 腾讯地图 TMS 坐标系示例 │ ├── Tmap/ # 天地图示例 │ ├── index.html # 天地图基础示例 │ └── 2.html # 天地图多图层切换示例 │ ├── ChineseTmsProviders/ # 多地图服务商示例 │ ├── assets/ # 本地静态资源 │ │ ├── css/ │ │ │ └── leaflet.css │ │ └── js/ │ │ ├── leaflet.js │ │ └── leaflet.ChineseTmsProviders.min.js │ ├── index.html # 导航首页 │ └── plug.html # 插件使用示例 │ └── plug/ # Leaflet 插件案例集合 │ ├── ChineseTmsProviders/ # 多地图服务商支持插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 导航首页 │ ├── plug.html # 插件使用示例 │ └── 各地图服务商示例... # 高德、腾讯、百度、天地图等 │ ├── Leaflet-Geoman/ # 几何图形编辑插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 综合示例 │ ├── 基本.html # 基础使用示例 │ ├── 电子围栏.html # 电子围栏应用 │ └── 高级.html # 高级功能示例 │ ├── Leaflet-Measure/ # 地图测量插件 │ ├── assets/ # 插件资源文件 │ └── index.html # 测量功能示例 │ ├── Leaflet-Search/ # 地图搜索插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 基础搜索示例 │ └── 高级.html # 高级搜索功能 │ ├── Leaflet-radar-scan/ # 雷达扫描插件 │ ├── assets/ # 插件资源文件 │ │ ├── css/ │ │ │ ├── leaflet.css │ │ │ ├── leaflet-radar.css │ │ │ └── images/ # 标记图标 │ │ └── js/ │ │ ├── leaflet.js │ │ └── leaflet-radar.js │ └── index.html # 雷达扫描示例 │ ├── Leaflet.Awesome-Markers/ # 精美标记图标插件 │ ├── assets/ # 插件资源文件 │ └── index.html # 图标样式示例 │ ├── Leaflet.BigImage/ # 地图截图插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 基础示例 │ └── 高级.html # 高级截图功能 │ ├── Leaflet.Draw/ # 地图绘制插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 综合示例 │ ├── 基本.html # 基础绘制 │ ├── 电子围栏.html # 围栏绘制应用 │ └── 高级.html # 高级绘制功能 │ ├── Leaflet.EasyButton/ # 快捷按钮插件 │ ├── assets/ # 插件资源文件 │ └── index.html # 按钮功能示例 │ ├── Leaflet.EasyPrint/ # 地图打印插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 基础打印示例 │ └── 高级.html # 高级打印功能 │ ├── Leaflet.GestureHandling/ # 手势控制插件 │ ├── assets/ # 插件资源文件 │ └── index.html # 手势控制示例 │ ├── Leaflet.StyledLayerControl/# 样式化图层控制插件 │ ├── assets/ # 插件资源文件 │ └── index.html # 图层控制示例 │ ├── Leaflet.ant-path/ # 蚂蚁线动画插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 基础动画示例 │ ├── 基本.html # 基本使用 │ └── 高级.html # 高级动画效果 │ ├── Leaflet.heat/ # 热力图插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 基础热力图示例 │ └── 高级.html # 高级热力图功能 │ ├── Leaflet.locatecontrol/ # 定位控制插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 基础定位示例 │ └── 高级.html # 高级定位功能 │ ├── Leaflet.side-by-side/ # 地图分屏对比插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 基础分屏示例 │ └── 高级.html # 高级分屏功能 │ ├── Leaflet.sidebar/ # 侧边栏插件 │ ├── assets/ # 插件资源文件 │ └── index.html # 侧边栏示例 │ ├── Leaflet.velocity/ # 风场/洋流可视化插件 │ ├── assets/ # 插件资源文件 │ ├── data/ # 示例数据 │ ├── index.html # 基础风场示例 │ └── 高级.html # 高级可视化 │ ├── MarkerCluster/ # 标记点聚类插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 综合示例 │ ├── 基本.html # 基础聚类 │ └── 高级.html # 高级聚类功能 │ ├── MovingMarker/ # 移动标记动画插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 综合示例 │ ├── 基本.html # 基础移动动画 │ └── 高级.html # 高级移动功能 │ ├── PolylineDecorator/ # 线条装饰插件 │ ├── assets/ # 插件资源文件 │ ├── 2.html # 高级示例 │ └── index.html # 基础装饰示例 │ ├── leaflet-echarts/ # ECharts 集成插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 基础图表示例 │ └── 高级.html # 高级图表功能 │ ├── leaflet-minimap/ # 小地图鹰眼插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 基础小地图示例 │ └── 高级.html # 高级小地图功能 │ ├── offline/ # 离线地图插件 │ ├── assets/ # 插件资源文件 │ ├── index.html # 基础离线功能 │ └── 使用.html # 离线使用示例 │ ├── 围栏/ # 电子围栏功能 │ ├── assets/ # 资源文件 │ ├── 基本.html # 基础围栏 │ ├── 电子围栏.html # 完整围栏应用 │ └── 高级.html # 高级围栏功能 │ └── 路线/ # 轨迹路线相关插件 ├── Leaflet-trackline/ # 轨迹线插件 │ ├── assets/ # 插件资源 │ ├── 基本.html # 基础轨迹 │ ├── 美化.html # 美化轨迹显示 │ └── 高级.html # 高级轨迹功能 │ └── Leaflet.TrackPlayer/ # 轨迹播放器插件 ├── assets/ # 插件资源 ├── 基本.html # 基础播放功能 └── 高级.html # 高级播放功能 ``` ## 快速开始 ### 环境要求 - 现代浏览器（Chrome、Firefox、Safari、Edge 等） - 网络连接（加载 CDN 资源和地图服务） ### 运行方式 #### 方式一：直接打开 直接双击打开任意 HTML 文件即可在浏览器中查看 #### 方式二：本地服务器（推荐） ```bash # 使用 Python 启动简单服务器 python -m http.server 8080 # 或使用 Node.js 的 http-server npx http-server -p 8080 ``` 然后在浏览器中访问 `http://localhost:8080` ## 目录详解 ### 1. aMap - 高德地图示例 | 文件 | 功能描述 | |------|----------| | `index.html` | 高德地图基础示例，显示卫星影像 | | `2.html` | 多图层切换，支持矢量/影像切换 | | `3 单击.html` | 地图点击事件监听，获取点击坐标 | | `4 标记.html` | 自定义标记图标，Popup 弹窗 | | `4 绘制形状.html` | 绘制多边形、圆形、矩形等几何图形 | | `5 弹窗.html` | 点击地图显示坐标信息弹窗 | | `6 弹窗 图表.html` | 标记点击显示 ECharts 柱状图弹窗 | | `plug.html` | 使用高德地图插件示例 | ### 2. QQMap - 腾讯地图示例 | 文件 | 功能描述 | |------|----------| | `index.html` | 腾讯地图 TMS 坐标系示例，展示 TMS 与 XYZ 坐标系区别 | ### 3. Tmap - 天地图示例 | 文件 | 功能描述 | |------|----------| | `index.html` | 天地图基础示例，影像底图+注记+比例尺 | | `2.html` | 完整版示例，支持底图切换和叠加图层控制 | ### 4. ChineseTmsProviders - 多地图服务商示例 使用 `leaflet.ChineseTmsProviders` 插件集成多种地图服务商： #### 高德地图 - `gaode-normal.html` - 矢量地图 - `gaode-satellite.html` - 卫星影像 - `gaode-satellite-annotion.html` - 卫星影像+道路注记 #### 腾讯地图 - `tencent-normal.html` - 矢量地图 - `tencent-satellite.html` - 卫星影像 #### 百度地图 - `baidu-normal.html` - 矢量地图 - `baidu-satellite.html` - 卫星影像 #### 天地图 - `tianditu-normal.html` - 矢量地图 - `tianditu-normal-annotion.html` - 矢量地图+注记 - `tianditu-satellite.html` - 卫星影像 - `tianditu-satellite-annotion.html` - 卫星影像+注记 - `tianditu-terrain.html` - 地形晕影 - `tianditu-terrain-annotion.html` - 地形晕影+注记 #### 其他 - `googlecn-normal.html` - 谷歌中国矢量地图 - `mapabc-normal.html` - MapABC 矢量地图 ### 5. plug - Leaflet 插件案例集合 #### 5.1 ChineseTmsProviders - 多地图服务商支持插件 **功能说明**：集成国内主流地图服务商的瓦片服务 **支持的地图服务商**： - 高德地图（矢量/卫星/注记） - 腾讯地图（矢量/卫星） - 百度地图（矢量/卫星） - 天地图（矢量/卫星/地形） - 谷歌中国地图 - MapABC 地图 **使用方法**： ```javascript // 使用高德矢量地图 L.tileLayer.chinaProvider('GaoDe.Normal.Map').addTo(map); // 使用天地图卫星影像+注记 L.tileLayer.chinaProvider('TianDiTu.Satellite.Map').addTo(map); L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion').addTo(map); ``` **文件位置**：`plug/ChineseTmsProviders/` --- #### 5.2 Leaflet-Geoman - 几何图形编辑插件 **功能说明**：强大的地图几何图形绘制和编辑工具 **核心特性**： - 绘制多边形、圆形、矩形、线条 - 编辑已有图形 - 拖拽调整形状 - 删除图形节点 - 电子围栏应用 **使用方法**： ```javascript // 启用绘制工具 map.pm.addControls({ position: 'topleft', drawCircle: true, drawPolygon: true, drawRectangle: true, drawPolyline: true, editMode: true, removalMode: true }); ``` **文件位置**：`plug/Leaflet-Geoman/` --- #### 5.3 Leaflet-Measure - 地图测量插件 **功能说明**：在地图上测量距离和面积 **核心特性**： - 距离测量（线段） - 面积测量（多边形） - 实时显示测量结果 - 支持单位切换 **使用方法**： ```javascript // 添加测量控件 L.control.measure({ position: 'topleft', primaryLengthUnit: 'meters', secondaryLengthUnit: 'kilometers', primaryAreaUnit: 'sqmeters' }).addTo(map); ``` **文件位置**：`plug/Leaflet-Measure/` --- #### 5.4 Leaflet-Search - 地图搜索插件 **功能说明**：在地图上搜索地点和位置 **核心特性**： - 地点搜索 - 自动补全 - 搜索结果定位 - 自定义搜索源 **使用方法**： ```javascript // 添加搜索控件 L.control.search({ url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}', jsonpParam: 'json_callback', propertyName: 'display_name', propertyLoc: ['lat', 'lon'], markerLocation: true, autoType: false, autoCollapse: true, minLength: 2 }).addTo(map); ``` **文件位置**：`plug/Leaflet-Search/` --- #### 5.5 Leaflet-radar-scan - 雷达扫描插件 **功能说明**：在地图中心显示雷达扫描动画效果 **核心特性**： - 🎯 旋转扫描扇形动画 - 📡 扫描线跟随旋转 - 🎨 多主题支持（绿色/蓝色/红色） - 📍 标记点脉冲效果 - ⚙️ 可调节扫描半径 - 🎮 完整的控制 API **使用方法**： ```javascript // 创建雷达扫描控件 var radar = L.control.radar({ radius: 200, // 雷达半径（像素） showCircles: true, // 显示范围圆圈 showGrid: true, // 显示网格 theme: 'green', // 主题颜色 autoStart: true // 自动开始扫描 }).addTo(map); // 控制方法 radar.start(); // 开始扫描 radar.stop(); // 停止扫描 radar.toggle(); // 切换显示/隐藏 radar.setRadius(300); // 设置半径 radar.setTheme('blue');// 切换主题 // 标记点管理 radar.addMarker(L.latLng(39.9, 116.4)); // 添加标记 radar.clearMarkers(); // 清除所有标记 ``` **主题配置**： | 主题 | 颜色值 | 适用场景 | |------|--------|----------| | `green` | 绿色 | 通用雷达效果 | | `blue` | 蓝色 | 科技感雷达 | | `red` | 红色 | 警戒/预警模式 | **文件位置**：`plug/Leaflet-radar-scan/` --- #### 5.6 Leaflet.Awesome-Markers - 精美标记图标插件 **功能说明**：使用 Font Awesome 图标创建漂亮的地图标记 **核心特性**： - 多种图标选择 - 自定义颜色 - 多种形状（圆形、方形、菱形） - 阴影效果 **使用方法**： ```javascript // 创建自定义图标标记 var redMarker = L.AwesomeMarkers.icon({ icon: 'coffee', markerColor: 'red', prefix: 'fa' }); L.marker([51.5, -0.09], {icon: redMarker}).addTo(map); ``` **文件位置**：`plug/Leaflet.Awesome-Markers/` --- #### 5.7 Leaflet.BigImage - 地图截图插件 **功能说明**：将当前地图视图保存为图片 **核心特性**： - 支持导出 PNG/JPG 格式 - 自动处理跨域问题 - 保留标记和图层 - 自定义截图尺寸 **使用方法**： ```javascript // 创建截图控件 L.control.bigImage({ position: 'topright', title: '导出图片' }).addTo(map); ``` **文件位置**：`plug/Leaflet.BigImage/` --- #### 5.8 Leaflet.Draw - 地图绘制插件 **功能说明**：在地图上绘制几何图形 **核心特性**： - 绘制标记、多边形、圆、矩形、线条 - 编辑已有图形 - 删除图形 - 导出 GeoJSON **使用方法**： ```javascript // 创建绘制控件 var drawnItems = new L.FeatureGroup(); map.addLayer(drawnItems); var drawControl = new L.Control.Draw({ edit: { featureGroup: drawnItems } }); map.addControl(drawControl); ``` **文件位置**：`plug/Leaflet.Draw/` --- #### 5.9 Leaflet.EasyButton - 快捷按钮插件 **功能说明**：在地图上添加功能快捷按钮 **核心特性**： - 支持 Emoji/图标 - 点击事件绑定 - 状态切换 - 按钮组支持 **使用方法**： ```javascript // 创建快捷按钮 L.easyButton('📍', function(btn, map) { map.locate({setView: true}); }, "定位当前位置").addTo(map); // 创建按钮组 L.easyBar([ L.easyButton('➕', function() { map.zoomIn(); }), L.easyButton('➖', function() { map.zoomOut(); }) ]).addTo(map); ``` **文件位置**：`plug/Leaflet.EasyButton/` --- #### 5.10 Leaflet.EasyPrint - 地图打印插件 **功能说明**：打印地图或导出为 PDF **核心特性**： - 一键打印地图 - 支持 PDF 导出 - 自定义打印尺寸 - 包含地图标题和图例 **使用方法**： ```javascript // 添加打印控件 L.easyPrint({ title: '打印地图', position: 'topleft', sizeModes: ['A4Portrait', 'A4Landscape'] }).addTo(map); ``` **文件位置**：`plug/Leaflet.EasyPrint/` --- #### 5.11 Leaflet.GestureHandling - 手势控制插件 **功能说明**：为触摸设备添加手势操作提示 **核心特性**： - 双指缩放提示 - 单指平移提示 - 优雅的提示动画 - 支持多语言 **使用方法**： ```javascript // 启用手势控制 map.gestureHandling.enable(); ``` **文件位置**：`plug/Leaflet.GestureHandling/` --- #### 5.12 Leaflet.StyledLayerControl - 样式化图层控制 **功能说明**：美化的图层切换控件，支持分组和图标 **核心特性**： - 分组显示图层 - 自定义图标 - 响应式设计 - 支持基础图层和覆盖图层 **使用方法**： ```javascript // 创建样式化图层控制器 var baseLayers = [ { name: "高德矢量", layer: gaodeNormal, icon: "icon-vec" }, { name: "高德影像", layer: gaodeSatellite, icon: "icon-sat" } ]; var overlays = [ { name: "道路注记", layer: annotionLayer, icon: "icon-road" } ]; L.Control.styledLayerControl(baseLayers, overlays).addTo(map); ``` **文件位置**：`plug/Leaflet.StyledLayerControl/` --- #### 5.13 Leaflet.ant-path - 蚂蚁线动画插件 **功能说明**：为线条添加蚂蚁行军动画效果 **核心特性**： - 流动的虚线动画 - 可调节动画速度 - 支持多种颜色 - 适用于轨迹展示 **使用方法**： ```javascript // 创建蚂蚁线路径 var antPolyline = L.polyline.antPath(latlngs, { "paused": false, "reverse": false, "delay": 400, "dashArray": [10, 20], "weight": 5, "color": "#0000FF", "pulseColor": "#FFFFFF" }).addTo(map); ``` **文件位置**：`plug/Leaflet.ant-path/` --- #### 5.14 Leaflet.heat - 热力图插件 **功能说明**：在地图上显示热力图 **核心特性**： - 点数据热力图 - 可调节模糊度和半径 - 支持渐变颜色 - 高性能渲染 **使用方法**： ```javascript // 创建热力图 var heat = L.heatLayer(latlngs, { radius: 25, blur: 15, maxZoom: 10, max: 1.0, gradient: {0.4: 'blue', 0.65: 'lime', 1: 'red'} }).addTo(map); ``` **文件位置**：`plug/Leaflet.heat/` --- #### 5.15 Leaflet.locatecontrol - 定位控制插件 **功能说明**：获取用户当前位置并在地图上显示 **核心特性**： - 自动定位 - 显示精度圆 - 跟随模式 - 自定义图标 **使用方法**： ```javascript // 添加定位控件 L.control.locate({ position: 'topleft', drawCircle: true, follow: true, setView: 'untilPan' }).addTo(map); ``` **文件位置**：`plug/Leaflet.locatecontrol/` --- #### 5.16 Leaflet.side-by-side - 地图分屏对比插件 **功能说明**：左右分屏对比两个地图图层 **核心特性**： - 拖动分屏边界 - 对比不同图层 - 支持多种地图 - 响应式设计 **使用方法**： ```javascript // 创建分屏对比 var sideBySide = L.control.sideBySide(leftLayers, rightLayers).addTo(map); ``` **文件位置**：`plug/Leaflet.side-by-side/` --- #### 5.17 Leaflet.sidebar - 侧边栏插件 **功能说明**：可折叠的地图侧边栏面板 **核心特性**： - 多标签页支持 - 响应式布局 - 平滑动画效果 - 支持自定义内容 **使用方法**： ```javascript // 创建侧边栏 var sidebar = L.control.sidebar({ autopan: false, closeButton: true, container: 'sidebar', position: 'left' }).addTo(map); // 打开指定面板 sidebar.open('home'); ``` **文件位置**：`plug/Leaflet.sidebar/` --- #### 5.18 Leaflet.velocity - 风场/洋流可视化插件 **功能说明**：在地图上可视化风场或洋流数据 **核心特性**： - 粒子动画效果 - 支持矢量数据 - 可调节粒子密度 - 支持颜色映射 **使用方法**： ```javascript // 创建风场图层 var velocityLayer = L.velocityLayer({ displayValues: true, displayOptions: { velocityType: 'Global Wind', displayPosition: 'bottomleft', displayEmptyString: 'No wind data' }, data: windData, maxVelocity: 10 }).addTo(map); ``` **文件位置**：`plug/Leaflet.velocity/` --- #### 5.19 MarkerCluster - 标记点聚类插件 **功能说明**：当地图缩放时自动聚类标记点 **核心特性**： - 自动聚类计算 - 自定义聚类图标 - 点击展开查看 - 支持大量标记点 **使用方法**： ```javascript // 创建聚类组 var markers = L.markerClusterGroup(); // 添加标记 for (var i = 0; i < addressPoints.length; i++) { var marker = L.marker([addressPoints[i][0], addressPoints[i][1]]); markers.addLayer(marker); } map.addLayer(markers); ``` **文件位置**：`plug/MarkerCluster/` --- #### 5.20 MovingMarker - 移动标记动画插件 **功能说明**：让标记点沿路径平滑移动 **核心特性**： - 平滑移动动画 - 可调节移动速度 - 支持暂停/继续 - 循环播放 **使用方法**： ```javascript // 创建移动标记 var movingMarker = L.Marker.movingMarker(latlngs, [10000, 10000], { autostart: true }).addTo(map); // 控制移动 movingMarker.start(); movingMarker.pause(); movingMarker.resume(); ``` **文件位置**：`plug/MovingMarker/` --- #### 5.21 PolylineDecorator - 线条装饰插件 **功能说明**：在线条上添加箭头、图案等装饰 **核心特性**： - 添加方向箭头 - 自定义图案 - 支持多种线条 - 可调节间距 **使用方法**： ```javascript // 创建带箭头的线条 var arrowHead = L.polylineDecorator(polyline, { patterns: [ { offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({ pixelSize: 15, polygon: false, pathOptions: {stroke: true} }) } ] }).addTo(map); ``` **文件位置**：`plug/PolylineDecorator/` --- #### 5.22 leaflet-echarts - ECharts 集成插件 **功能说明**：在地图上集成 ECharts 图表 **核心特性**： - 支持所有 ECharts 图表类型 - 地图与图表联动 - 自定义图表位置 - 支持大数据量 **使用方法**： ```javascript // 创建 ECharts 图层 var overlay = L.echartsLayer({ option: { series: [{ type: 'scatter', coordinateSystem: 'leaflet', data: data }] } }).addTo(map); ``` **文件位置**：`plug/leaflet-echarts/` --- #### 5.23 leaflet-minimap - 小地图鹰眼插件 **功能说明**：在地图角落显示缩略图 **核心特性**： - 可拖动位置 - 显示当前视口范围 - 点击快速定位 - 支持自定义图层 **使用方法**： ```javascript // 创建小地图 var miniMap = new L.Control.MiniMap( L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'), { toggleDisplay: true, minimized: false, position: 'bottomright' } ).addTo(map); ``` **文件位置**：`plug/leaflet-minimap/` --- #### 5.24 offline - 离线地图插件 **功能说明**：支持离线存储和访问地图瓦片 **核心特性**： - 瓦片离线缓存 - IndexedDB 存储 - 离线/在线切换 - 缓存管理 **使用方法**： ```javascript // 创建离线瓦片图层 var offlineLayer = L.tileLayer.offline('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap', subdomains: 'abc', minZoom: 13, maxZoom: 19 }).addTo(map); // 保存瓦片到本地 offlineLayer.saveTiles(zoomLevels); ``` **文件位置**：`plug/offline/` --- #### 5.25 围栏 - 电子围栏功能 **功能说明**：创建和管理电子围栏区域 **核心特性**： - 绘制围栏区域 - 判断点是否在围栏内 - 围栏报警 - 多种围栏形状 **使用方法**： ```javascript // 创建围栏 var fence = L.polygon(latlngs, {color: 'red'}).addTo(map); // 判断点是否在围栏内 var isInside = turf.booleanPointInPolygon(point, fence.toGeoJSON()); ``` **文件位置**：`plug/围栏/` --- #### 5.26 路线 - 轨迹路线相关插件 ##### 5.26.1 Leaflet-trackline - 轨迹线插件 **功能说明**：显示轨迹路线并支持回放 **核心特性**： - 轨迹连线 - 轨迹回放 - 速度控制 - 轨迹美化 **使用方法**： ```javascript // 创建轨迹线 var trackLine = L.trackLine(latlngs, { color: '#ff0000', weight: 3, opacity: 0.8 }).addTo(map); // 播放轨迹 trackLine.play(); ``` **文件位置**：`plug/路线/Leaflet-trackline/` --- ##### 5.26.2 Leaflet.TrackPlayer - 轨迹播放器插件 **功能说明**：专业的轨迹播放控制 **核心特性**： - 播放/暂停/停止 - 进度控制 - 速度调节 - 轨迹信息展示 **使用方法**： ```javascript // 创建轨迹播放器 var trackPlayer = L.trackPlayer(latlngs, { markerOptions: { icon: carIcon }, speed: 100 }).addTo(map); // 控制播放 trackPlayer.start(); trackPlayer.pause(); trackPlayer.setSpeed(200); ``` **文件位置**：`plug/路线/Leaflet.TrackPlayer/` --- ## 核心知识点 ### 坐标系说明 | 坐标系 | 特点 | 使用场景 | |--------|------|----------| | **WGS84** | 国际标准坐标系 | GPS 设备、国际标准 | | **GCJ-02** | 国测局坐标系（火星坐标） | 高德、腾讯、谷歌中国 | | **BD-09** | 百度坐标系 | 百度地图 | | **TMS** | Y轴从南向北 | 腾讯地图、部分 OSM | | **XYZ/Slippy** | Y轴从北向南 | 高德、天地图、谷歌 | ### 瓦片服务类型 | 类型 | 代码 | 说明 | |------|------|------| | 矢量地图 | `vec` / `normal` | 道路、建筑、文字标注 | | 卫星影像 | `satellite` / `img` | 卫星/航拍影像 | | 地形晕影 | `terrain` | 地形起伏展示 | | 注记图层 | `annotion` | 道路名、地名标注 | ### 常用 Leaflet API ```javascript // 创建地图 var map = L.map('map').setView([纬度, 经度], 缩放级别); // 添加瓦片图层 L.tileLayer('瓦片URL', { subdomains: '子域名', maxZoom: 最大缩放级别, tms: true // TMS坐标系需要 }).addTo(map); // 添加标记 L.marker([纬度, 经度]).addTo(map); // 绑定弹窗 marker.bindPopup('弹窗内容').openPopup(); // 监听点击事件 map.on('click', function(e) { console.log(e.latlng); // 获取点击坐标 }); // 添加图层控制 L.control.layers(baseLayers, overlays).addTo(map); // 添加比例尺 L.control.scale().addTo(map); ``` ## 常见问题 ### 1. 地图瓦片加载失败 - 检查网络连接 - 确认 API Key 是否有效 - 检查浏览器控制台报错信息 ### 2. 腾讯地图显示异常 - 腾讯地图使用 TMS 坐标系，需要设置 `tms: true` ### 3. 标记图标不显示 - 确保 `leaflet/images/` 目录下有图标文件 - 检查图标路径是否正确 ### 4. ECharts 图表不显示 - 检查 CDN 是否加载成功 - 确保图表容器有明确的宽高 ### 5. 雷达扫描效果不显示 - 检查浏览器是否支持 CSS 动画 - 确认 `leaflet-radar.js` 正确加载 - 查看控制台是否有 JavaScript 错误 ## 参考资料 ### 官方文档 - [Leaflet 官方文档](https://leafletjs.com/reference.html) - [ECharts 官方文档](https://echarts.apache.org/zh/option.html) - [天地图 API](https://www.tianditu.gov.cn/) - [高德地图 API](https://lbs.amap.com/) ### 插件资源 #### 地图服务 - [leaflet.ChineseTmsProviders](https://github.com/htoooth/Leaflet.ChineseTmsProviders) - 多地图服务商支持 #### 绘制与编辑 - [Leaflet-Geoman](https://github.com/geoman-io/leaflet-geoman) - 几何图形编辑 - [Leaflet.Draw](https://github.com/Leaflet/Leaflet.draw) - 地图绘制 - [Leaflet-Measure](https://github.com/ljagis/leaflet-measure) - 地图测量 - [PolylineDecorator](https://github.com/bbecquet/Leaflet.PolylineDecorator) - 线条装饰 #### 标记与图标 - [Leaflet.Awesome-Markers](https://github.com/lvoogdt/Leaflet.awesome-markers) - 精美标记图标 - [MarkerCluster](https://github.com/Leaflet/Leaflet.markercluster) - 标记点聚类 - [MovingMarker](https://github.com/ewoken/Leaflet.MovingMarker) - 移动标记动画 #### 可视化效果 - [Leaflet-radar-scan](https://github.com/w8r/leaflet-radar) - 雷达扫描效果 - [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat) - 热力图 - [Leaflet.ant-path](https://github.com/rubenspgcavalcante/leaflet-ant-path) - 蚂蚁线动画 - [Leaflet.velocity](https://github.com/danwild/leaflet-velocity) - 风场/洋流可视化 - [leaflet-echarts](https://github.com/gnijuohz/echarts-leaflet) - ECharts 集成 #### 地图控件 - [Leaflet.BigImage](https://github.com/pasichnykvasyl/Leaflet.BigImage) - 地图截图 - [Leaflet.EasyButton](https://github.com/CliffCloud/Leaflet.EasyButton) - 快捷按钮 - [Leaflet.EasyPrint](https://github.com/rowanwins/leaflet-easyPrint) - 地图打印 - [Leaflet.GestureHandling](https://github.com/elmarquis/Leaflet.GestureHandling) - 手势控制 - [Leaflet.StyledLayerControl](https://github.com/davicustodio/Leaflet.StyledLayerControl) - 样式化图层控制 - [Leaflet.sidebar](https://github.com/Turbo87/sidebar-v2) - 侧边栏 - [Leaflet.side-by-side](https://github.com/digidem/leaflet-side-by-side) - 分屏对比 - [leaflet-minimap](https://github.com/Norkart/Leaflet-MiniMap) - 小地图鹰眼 - [Leaflet-Search](https://github.com/stefanocudini/leaflet-search) - 地图搜索 - [Leaflet.locatecontrol](https://github.com/domoritz/leaflet-locatecontrol) - 定位控制 #### 轨迹与路线 - [Leaflet-trackline](https://github.com/MrLoh/Leaflet.TrackLine) - 轨迹线 - [Leaflet.TrackPlayer](https://github.com/liuxinqiong/leaflet-trackplayer) - 轨迹播放器 #### 离线与其他 - [offline](https://github.com/robertomoena/leaflet-offline) - 离线地图 - [Turf.js](https://turfjs.org/) - 地理空间计算（用于围栏功能） ## 许可证 本项目基于 MIT 许可证开源。 ## 参与贡献 欢迎贡献代码！ 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request