Leaflet
2025年09月09日 09:04

GISBox是一站式三维 GIS 数据编辑、转换、发布平台，支持 OSGB/GEOTIFF/RVT 等多种 GIS 格式编辑，转换为 3DTiles/Terrain 等并发布。

简介

Leaflet是一个开源的轻量级 JavaScript 库，专为创建交互式Web地图设计，具有高性能和移动端友好的特点。它提供简洁的API和模块化架构，支持通过插件扩展功能（如热力图、图层控制等），并能集成 OpenStreetMap、Mapbox等第三方地图服务。其核心优势在于体积小（约 39-42KB）、加载速度快，且兼容主流浏览器及旧版本IE。Leaflet广泛应用于数据可视化、地理信息展示等场景，尤其适合对移动端适配要求高的项目。

文件结构

Leaflet的文件结构主要包括以下核心部分：

  1. 核心库文件‌：包含压缩版（leaflet.js）和未压缩版（leaflet-src.js）的JavaScript文件，以及对应的Source map文件（.map）用于调试。
  2. 样式文件‌：leaflet.css用于控制地图的视觉样式，必须与图片资源配套使用。
  3. 图片资源：images文件夹存放地图所需的图标、标记等图像文件，需与leaflet.css同级目录。
  4. 扩展插件：如热力图（heatMap）、点聚合（pruneCluster）等功能的独立插件文件，通常以模块化形式组织。
  5. 文档与示例：部分项目包含docs（文档）、examples（示例代码）等辅助目录。

优点

  1. 轻量高效：核心库仅约39KB（压缩后），加载速度快，适合移动端和低带宽环境‌。
  2. 跨平台兼容性：支持所有现代浏览器（包括 IE10+）及移动设备，触控交互延迟低‌。
  3. 插件生态丰富：300+官方认证插件覆盖热力图、轨迹动画、路径规划等功能，可快速扩展‌。
  4. 数据兼容性强：支持GeoJSON、KML等8种地理数据格式，内置坐标系转换工具‌。
  5. 性能优化：动态瓦片加载、矢量图形复用等技术，万级标记点渲染帧率稳定55fps以上‌。

缺点

  1. 复杂场景性能局限：依赖SVG/Canvas渲染，处理海量矢量数据时可能出现卡顿，需依赖矢量切片优化‌。
  2. 功能深度不足：相比OpenLayers或Mapbox GL JS，缺乏高级GIS分析功能（如拓扑分析）‌。
  3. 移动端交互限制：手势操作需依赖插件（如Leaflet.GestureHandling）实现，原生支持较弱‌。
  4. 国内地图适配需插件：需通过第三方插件（如 Leaflet.ChineseTmsProviders）支持高德、百度等国内地图服务‌。

应用场景

Leaflet是一个开源的JavaScript库，广泛应用于交互式地图开发，适用于网站地图（如旅游、房地产平台）、移动应用（如导航、健身追踪）、数据可视化（如销售、环境数据分布）以及地理信息系统（GIS）应用中的地图展示与分析‌。此外，它还支持游戏开发中的地图交互功能‌。其轻量级设计和丰富的插件生态使其能灵活适配多种场景需求‌。

示例图

1. Leaflet（二维地图）示例图。

2. Leaflet在线地图。

文件打开方式

1. vue+leaflet：加载含有shp文件的zip。

相关 GIS 服务

Web 地图渲染服务 OGC API

切片地图服务

HERE Technologies

Carto

参考资料

  1. https://baike.baidu.com/item/leaflet/3613406?svcp_stk=1_3y88FpLZKde2GWE-XZh_4aDfaCG6wufaWCFGL61xyZB1cib12s3iYV50D-zN0VAqpWfHFpcMx-2RV_TtTyKR_WojkmzEmqzllHSloKPwbeYIayGKB_EkGLDoOqPHmEI7Nniwa1QY_5Qa9nPCP8z4b9k7OcSUFtGs9rPi1OV9VUOHSY6BbMOpns71ifDXjM_i
  2. https://blog.csdn.net/mynamel/article/details/122210606
  3. https://cloud.tencent.com/developer/article/1092335
  4. https://blog.csdn.net/cuclife/article/details/138495455