Leaflet 插件
Leaflet的目的是尽可能轻巧,并着重于一组核心功能,而扩展其功能的一种简单方法是使用第三方插件。 感谢Leaflet背后的强大社区,提供了数百个不错的插件供大家选择。
Tile & Image 图层
Overlay data
Overlay Display
Overlay interaction
Tile & image layers
下面的插件支持加载不同的地图并提供 Tile 和 Image 图层的功能。
Basemap providers
几乎不需要配置,开箱即用的底图。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Azure Maps Leaflet plugin | 一个 Leafletjs 插件,可以轻松覆盖 Azure Maps 中可用的所有不同切片图层.支持使用 Azure Maps 订阅密钥或 Azure Active Directory 进行身份验证。 |
Demo | Ricky Brundritt |
Bing Maps Layer | 将 Bing 地图瓦片 添加到你的 Leaflet 地图中。需要 Leaflet v1.0.0.beta.2 或更高版本。 |
Demo | Gregor MacLennan |
Esri Leaflet | 一组用于将 ArcGIS 服务与 Leaflet 一起使用的工具。支持地图服务、要素图层、ArcGIS Online 切片等。 |
Patrick Arlt | |
L.GridLayer.GoogleMutant | 显示 Google 地图(由于采用了 DOM mutation observer 技术,所以最为高效)。 |
Demo | Iván Sánchez |
L.MapkitMutant | 显示 Apple 的 MapkitJS 底图。 |
Iván Sánchez | |
L.TileLayer.HERE | 显示来自 HERE 地图的地图瓦片。 |
Demo | Iván Sánchez |
L.TileLayer.Kartverket | 提供来自 Kartverket(挪威测绘局)的瓦片图层的简单设置 |
Kultur og naturreise | |
Leaflet.ChineseTmsProviders | 包含各种中国瓦片供应商的配置——天地图、MapABC、高德等。 |
Demo | Tao Huang |
Leaflet.GIBS | NASA EOSDIS GIBS 图像集成。该插件提供 96 个每日更新图层 以及卫星图像和科学参数。 |
Demo | Alexander Parshin |
Leaflet.KoreanTmsProviders | 包含各种(韩国)瓦片供应商的配置——Daum、Naver、VWorld 等。 |
Seong Choi | |
Leaflet.Spain.WMS | 为西班牙制图机构提供的多个西班牙 Web 地图服务 (WMS) 图层(PNOA、IGN 基础、Catastro 等)提供简单的设置。 |
Patricio Soriano | |
Leaflet.TileLayer.HERE | 显示来自 HERE 地图的瓦片。 |
Wanderson Souza | |
Leaflet-Tilelayer-Hong-Kong | 显示来自 Hong Kong GeoData Store 提供商的香港地图瓦片。 |
spaceflighter | |
Leaflet.TileLayer.Mierune | 显示来自 Mierune 地图的瓦片。 |
Demo | Mierune |
Leaflet.TileLayer.Swiss | 使用来自 Swisstopo 的地图瓦片显示瑞士的国家地图。 |
Demo | Roman Karavia |
leaflet-providers | 包含各种免费瓦片提供者的配置——OSM、OpenCycleMap、Stamen、Esri 等。 |
Demo | leaflet-extras members |
PolarMap.js | 用于显示来自 ArcticWebMap 的瓦片的 JavaScript 库,这是一个免费的瓦片提供商,在多个北极极地投影中提供 OSM 数据。包括较低级别的 API,用于与其他 Leaflet 插件进行更深入的集成。 |
GeoSensorWeb Lab | |
SuperMap Leaflet | SuperMap Leaflet 是一个用于处理 SuperMap 服务类型的 Leaflet 插件。支持 SuperMap 服务、瓦片等。 |
Demo | SuperMap |
Basemap formats
以下插件用于加载常见格式(非默认)的底图或者栅格图层。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
azgs-leaflet | Leaflet 的一组小插件,包括带有过滤功能的 WFS-GeoJSON 图层、GeoJSON 的悬停控件和 Esri 瓦片图层。 |
AZGS | |
cartodb-leaflet | Leaflet 的官方 CartoDB 插件。 |
Vizzuality | |
GeoRasterLayer | 显示具有可配置分辨率的小型和大型 GeoTIFF 文件。专为简单性和性能而打造。与 JavaScript 栅格分析库 GeoBlaze 集成。 |
Demo | Daniel J. Dufour |
L.TileLayer.WMTS | Leaflet 的一个简单的 WMTS Tile Layer 插件。 |
Demo | Alexandru Calin |
Leaflet.bpg | 支持 .bpg 图像格式解码的 TileLayer。 |
Andrzej Zaborowski | |
Leaflet.CanvasLayer.Field | 加载和格式化栅格文件(geotiff 和 asciigrid 格式)。 它包括一个 |
Demo | Víctor Velarde |
Leaflet GeoJSON Encoded | 使用 Google 折线编码算法扩展 L.GeoJSON 层,允许优化数据传输。 |
Geobricks | |
Leaflet.ImageOverlay.OGCAPI | 一个 (untiled) OGC API Maps 规范草案的客户端。 |
Demo | Iván Sánchez Ortega |
Leaflet.NonTiledLayer.WCS | 显示来自 Web Coverage Services 的栅格数据。 可以在客户端中设置和查询栅格。 |
Demo | Stuart Matthews |
Leaflet.projwmts | 添加 WMTS 服务(GUGiK 波兰)。 |
Demo | Geoportal Poland |
Leaflet.TileLayer.MBTiles | 加载 |
Demo | Iván Sánchez |
leaflet.TileLayer.WMTS | 为 Leaflet 添加 WMTS(IGN)图层。 |
Alexandre Melard | |
leaflet.wms | 增强了对 Leaflet 的 WMS 支持,包括 single-tile/untiled 图层、共享 WMS 源以及通过 GetFeatureInfo 进行的图层识别。 |
Demo | S. Andrew Sheppard |
Leaflet-2gis | 添加对 2GIS 切片图层的支持 |
Demo | Eugene Mikhalev |
leaflet-geotiff | 将 geoTIFF 文件中的栅格数据显示为图像或方向箭头。 可以在客户端中设置和查询栅格。 可以应用可选的剪贴蒙版,例如 将 DEM 限制在陆地区域。 |
Demo | Stuart Matthews |
leaflet-tilejson | 向 Leaflet 添加对 TileJSON 规范的支持。 |
Per Liedman | |
TileLayer.GeoJSON | GeoJSON 瓦片的 TileLayer。 |
Glen Robertson |
Non-map base layers
有时候你不想加载地图,只想加载大的自定义图像,非常大的那种。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet.TileLayer.IIP | 在 Leaflet 中添加对 IIPImage 图层的支持。 |
Demo | Emmanuel Bertin |
leaflet-fractal | 使用 2D 画布渲染一些分形(Mandelbrot 集、Julia 集和其他一些)。 |
Demo | Alexander Parshin |
Leaflet-IIIF | Leaflet 的 IIIF(国际图像互操作性框架)查看器。 |
Demo | Jack Reed |
leaflet-rastercoords | 渲染使用 gdal2tiles-leaflet 生成的大型平铺图像。 图像光栅坐标可用于设置标记等。 |
Demo | Commenthol |
TileLayer.DeepZoom | 一个用于 DeepZoom 图像的 TileLayer。 |
Al Farisi | |
TileLayer.Gigapan | 一个用于 Gigapan 图像的 TileLayer。 |
Dan Sherman | |
TileLayer.Zoomify | 一个用于 Zoomify 图像的 TileLayer。 |
Demo | Bjørn Sandvik |
Tile/image display
以下插件更改了地图中显示瓦片(tile)或图像(image)图层的方式。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet.Control.DetailLevel | 通过实时修改 zoomOffset,以高于视网膜 (hdpi) 的分辨率显示瓦片。 对于在不同缩放级别之间大幅改变地图样式的映射源很有用。 将 zoomOffset 增加太多确实会减慢浏览器的速度,因为显示的瓦片数量会随着 zoomOffset 呈指数增长。 |
Demo | Wessel Valkenburg |
Leaflet.Control.Opacity | 使多个瓦片图层透明。 |
Demo | Yasunori Kirimoto |
Leaflet.Control.SideBySide | 用于添加分屏以比较两个地图 overlay 图层的 Leaflet 控件。 |
Demo | Digital Democracy |
Leaflet.DistortableImage | 使用户能够在 Leaflet 地图上缩放、旋转和扭曲图像。 |
Demo | Public Lab |
Leaflet.DistortableVideo | 使用户能够在 Leaflet 地图上缩放、旋转和扭曲视频。 |
Demo | Roni Karilkar |
Leaflet.ImageOverlay.Arrugator | 指定四个控制点和一个 proj4js 投影函数,显示重新投影的 ImageOverlay。 |
Demo | Iván Sánchez Ortega |
Leaflet.ImageOverlay.Rotate | 给定三个控制点,显示旋转、缩放和倾斜(但不是 rubbersheeted)的 ImageOverlay。 |
Demo | Iván Sánchez Ortega |
Leaflet.Multispectral | 使用纯客户端 JavaScript 为 Leaflet 图像层提供多光谱通道操作和处理工具(例如 NDVI 或其他遥感方法)。 它通过 ImageOverlay |
Demo | Public Lab |
Leaflet.NonTiledLayers | 一个用于 non-tiled overlay 的 Leaflet 图层。 |
Demo | PTV Logistics |
Leaflet.OpacityControls | 用于调整地图图层不透明度的简单 Leaflet 控件。 |
Demo | Jared Dominguez |
leaflet-rotate | 向 Leaflet 地图窗格添加旋转功能。 |
Demo | Raruto |
Leaflet.TileLayer.Canvas | 将瓦片渲染为 Canvas 元素。 |
GIAP | |
Leaflet.TileLayer.ColorFilter | 一个简单轻量级的 Leaflet 插件,用于在地图图块上应用 CSS 过滤器。 |
Demo | Cláudio Kawakani |
Leaflet.TileLayer.Colorizr | 可以通过 RGBA 代码修改颜色的 Leaflet TileLayer。 |
Hinrich Riedel | |
Leaflet.TileLayer.ColorPicker | 带有 getColor(latLng) 的 Leaflet TileLayer。 |
Demo | Yuzo Matsuzawa |
Leaflet.TileLayer.GL | 将自定义 WebGL 着色器应用于瓦片图层中的每个瓦片。 |
Demo | Iván Sánchez |
Leaflet.TileLayer.GLColorScale | TileLayer 使用 WebGL 根据指定的色标对浮点像素进行着色。 |
Demo | David Schneider |
Leaflet.TileLayer.GLOperations | WebGL TileLayer:为浮点像素着色、像素值的鼠标事件处理程序、山体阴影、轮廓、过渡、过滤和在多个图层上进行计算。 |
Demo | Thorbjørn Horgen |
Leaflet.TileLayer.Mask | 具有遮罩效果的 TileLayer。 |
Demo | Yuzo Matsuzawa |
Leaflet.TileLayer.PixelFilter | 可以通过 RGB 代码过滤和替换像素的 TileLayer。 |
Demo | GreenInfo Network |
TileLayer.BoundaryCanvas | 允许你绘制具有任意多边形边界的瓦片图层。 HTML5 Canvas 用于渲染。 |
Alexander Parshin | |
TileLayer.Grayscale | 具有灰度改造的常规 TileLayer。 |
Ilya Zverev |
Tile Load
下面插件改变了将瓦片(Tile)图层加载到地图中的方式。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet.EdgeBuffer | 对于 Leaflet 1.0,缓冲区超出视口边缘的瓦片。 |
Demo | Alex Paterson |
Leaflet.FeatureGroup.LoadEvents | 支持 |
Demo | G. Lathoud |
Leaflet.FunctionalTileLayer | 允许您使用函数定义瓦片图层 URL。 甚至可以使用 Promise 处理异步源。 |
Ishmael Smyrnow | |
Leaflet.GridLayer.FadeOut | 删除网格图层和瓦片图层时淡出它们,使底图更改更平滑(对于 1.0.0)。 |
Demo | Iván Sánchez |
Leaflet.loading | 一个简单的控件,在加载图块和其他数据时添加加载指示器。 |
Demo | Eric Brelsford |
Leaflet.MultiTileLayer | 允许从几个瓦片源组成一个瓦片层。每个源只在定义的缩放级别上活动。 |
Mattias Bengtsson | |
leaflet.offline | 允许将瓦片存储在数据库中,以便离线访问。 |
Demo | Allart Kooiman |
Leaflet.TileCorrection | 允许在地图的不同区域加载瓦片,并以自定义的缩放比例开始。 |
Allart Kooiman | |
Leaflet.TileLayer.Fallback | 用较低缩放比例的等值瓦片代替丢失的瓦片(HTTP 404 Not Found Error)。 |
Demo | ghybs |
TileLayer.Cordova | 与 Cordova/Phonegap 一起使用,将瓦片缓存添加到本地设备存储,以便在离线和在线模式之间进行切换。 |
Greg Allensworth | |
TileLayer.PouchDBCached | 允许所有的 Leaflet TileLayers 缓存到 PouchDB 中供离线使用。 |
Demo | Iván Sánchez Ortega |
Vector tiles
用来显示矢量瓦片(Tile) 的插件。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Basemaps with Vector Tiles | 用于 Leaflet 的矢量瓦片插件。利用 MapTiler SDK 的强大功能,访问其专业创建的多语言矢量瓦片底图目录。你还可以将其用于矢量瓦片数据叠加。 |
Demo | J. Lurie | MapTiler |
geojson-vt | 用于将 GeoJSON 数据快速切成矢量图的高效库。 |
Mapbox | |
Hoverboard | 用 Leaflet(geojson, topojson, 和 protobuf) 在画布上渲染矢量图。仅与 Leaflet 0.7.x 兼容。 |
Demo | Tristan Davies |
Leaflet.MapboxVectorTile | 一个用于在画布上渲染 Mapbox 矢量瓦片的 Leaflet 插件。仅与 Leaflet 0.7.x 兼容。 |
Demo | SpatialDev |
maplibre-gl-leaflet | 将 maplibre-gl-js 地图加载为 Leaflet 图层。 |
MapLibre | |
Leaflet.VectorGrid | 在 Leaflet 1.0.0 中显示网格矢量数据(使用 geojson-vt 或 protobuf 矢量切片切片的 GeoJSON 或 TopoJSON)。 |
Demo | Iván Sánchez |
Leaflet.VectorTileLayer | 用于显示矢量瓦片的 Leaflet 图层。 非常类似于 Leaflet.VectorGrid 除了样式:可以为所有图层指定单一样式,而 VectorGrid 则需要提前知道图层名称。 用于 Leaflet 1.0.0。 |
Joachim Kuebart | |
leaflet-geojson-vt | 在 Leaflet 上动态显示 GeoJSON 数据的矢量瓦片。 |
Demo | Tek Kshetri |
Overlay data
以下插件提供了加载叠加数据(GIS 矢量数据)的新方法:点、线和多边形。
Overlay data formats
使用各种 GIS 格式加载你自己的数据。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet.BetterFileLayer | 将空间化文件载入 leaflet 的权威插件。 |
Demo | Gabriel Russo |
Leaflet.encoded | 在 Leaflet 中使用编码的多段线。 |
Jieter | |
Leaflet.FileGDB | 将 ESRI 文件地理数据库作为图层放到您的地图上。 |
Calvin Metcalf | |
Leaflet.FileLayer | 使用 HTML5 FileReader API(即本地没有服务器)将文件(GeoJSON、GPX、KML)加载到地图中。 |
Mathieu Leplatre | |
Leaflet.geoCSV | 用于将 CSV 文件加载为 geoJSON 图层的 Leaflet 插件。 |
Iván Eixarch | |
Leaflet GPX | GPX 层,通过提供对距离、移动时间、配速、海拔、心率等信息的访问,针对体育活动。 |
Demo | Maxime Petazzoni |
Leaflet LayerJSON | 在 Leaflet 层中转换任何 JSON 数据源、在层中加载 JSON 数据并使用缓存系统最小化远程请求的简单方法。 |
Demo | Stefano Cudini |
Leaflet.Shapefile | 将 shapefile 作为图层放在地图上。 |
Demo | Calvin Metcalf |
Leaflet-BetterScale | 一个新的、更像 GIS 的比例尺,带有交替的黑/白条。 |
Demo | Dan Brown |
Leaflet-CsvTiles | 使用神奇的 PapaParse 库从平铺的 csv 文件中加载点(Point)。 |
Demo | Gherardo Varando |
Leaflet-GeoPackage | 加载 GeoPackage 瓦片和 Feature 图层。 |
Demo | Daniel Barela |
leaflet-kml | 加载 & 显示 KML。 |
Demo | Windyx |
leaflet-omnivore | 为 Leaflet 加载和转换 CSV, KML, GPX, TopoJSON, WKT 格式。 |
Demo | Mapbox |
Leaflet-WFST | WFS 具有事务支持的客户端图层 |
Flexberry | |
qgis2web | 一个无需编码即可制作网络地图的 QGIS 插件。 |
Tom Chadwin | |
Wicket | 一个适度的库,用于翻译 WKT 和 Leaflet 几何对象(例如,L.marker() 实例和 “POINT() “字符串之间)。 |
Demo | K. Arthur Endsley |
Dynamic/custom data loading
加载地图中更新的动态数据,或以非标准方式加载GIS矢量数据。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet Ajax | 通过 ajax 或 jsonp 添加 GeoJSON 数据。 |
Calvin Metcalf | |
Leaflet GeoSSE | 使用服务器发送的事件将实时数据添加到 Leaflet 地图。 |
An Tran | |
Leaflet.Indoor | 创建室内地图。 |
Demo | Christopher Baines |
Leaflet.Liveupdate | 定期(“实时”)更新地图上的内容。 |
Demo | Martijn Grendelman |
Leaflet.mytrack | 在地图上跟踪我的轨迹并下载它。 |
Demo | DJ |
Leaflet.Pouch | 使用 PouchDB 将 CouchDB 数据同步到本地存储(indexedDB),只需添加 couchDB 数据或作为 indexedDB 的一个不那么混乱的实现。 |
Calvin Metcalf | |
Leaflet Realtime | 将实时数据放在 Leaflet 地图上:实时跟踪 GPS 单元、传感器数据或任何东西。 |
Per Liedman | |
Leaflet uGeoJSON | 通过 ajax 请求添加一个自动更新的 GeoJSON 数据层。 |
Benjamin VADANT |
Synthetic overlays
这些插件从头开始创建有用的叠加层,无需加载。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
L.OS.Graticule | 覆盖英国条例调查(OS)的1公里网格方块和标签。 |
Jon Shutt | |
Leaflet.AutoGraticule | 绘制一个经纬线的网格,自动调整比例以适应当前的缩放水平。 |
Demo | Candid Dauth |
Leaflet.EdgeScaleBar | 在 Web 墨卡托投影中沿着地图的顶部和右侧边缘创建刻度条。 |
Dražen Tutić, Ana Kuveždić Divjak | |
Leaflet.Graticule | 绘制经纬线网格。 |
Bjørn Sandvik | |
leaflet.latlng-graticule | 创建一个 Canvas 作为 ImageOverlay 来绘制 Lat/On Graticule,并在地图的边缘显示网格刻度标签。 |
Demo | CloudyBay |
Leaflet.Maidenhead | 一个 Maidenhead Locator System 网格的实现。 |
Demo | Iván Sánchez Ortega |
Leaflet.MetricGrid | 用于 Leaflet 的通用公制网格覆盖,具有已定义的 UTM、英国和爱尔兰网格。 |
Bill Chadwick | |
Leaflet.PolarGraticule | 绘制投影感知的经纬线网格,在经纬线上标注标签,并提供设置经纬线范围和间隔的选项。 |
Demo | Anton Steketee |
Leaflet.SimpleGraticule | 为 L.CRS.Simple 坐标系绘制网格线。 |
Andrew Blakey | |
Leaflet.Sun | 点击地图获取日落或日出。 |
Demo | DJ |
Leaflet.Terminator | 在地图上覆盖白天和黑夜区域。 |
Jörg Dietrich | |
Leaflet.timezones | 在 Leaflet Earth 地图上叠加时区。 |
Demo | DJ |
Data providers
从三方服务加载 overlay 数据。 另请参阅 Basemap providers 和 plugin collections.
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet.dbpediaLayer | 来自 Wikipedia 的兴趣点图层 - 通过 ajax 从 DBpedia 的 SPARQL 端点加载。 |
Kr1 | |
Leaflet.FreieTonne | 来自FreieTonne的具有航海特征的 overlay。 |
Demo | Candid Dauth |
Leaflet.GeographPhotos | 使用他们的 API 在交互式 overlay 中显示来自 Geograph British 和 Ireland 的地理照片。 |
Demo | Barry Hunter |
Leaflet Overpass Layer | 轻松引入来自 overpass api 的数据。 |
Demo | Guillaume AMAT |
Leaflet.Rainviewer | RainViewer 雷达数据 API 插件。 |
Demo | Marcin Wasilewski |
Leaflet Vector Layers | 允许从许多地理 Web 服务轻松创建矢量图层,例如 ArcGIS Server、Arc2Earth、GeoIQ、CartoDB 和 GIS Cloud。 |
Jason Sanford | |
leaflet-environmental-layers | 在易于使用的 Leaflet 库中收集不同的环境地图图层。 |
Demo | Public Lab |
leaflet-radar | Leaflet 的动画卫星天气雷达 overlay 图层。 |
Demo | rwev |
Leaflet-Wikipedia | 用于在地图图层上显示 Wikipedia API 条目的 Leaflet 插件。 |
Demo | Matthew Barker |
Windy-Leaflet-plugin | 使用 Windy 的免费 API 在你的页面上显示动画天气图。 |
Demo | Windy.com |
Overlay display
以下插件提供了显示 overlay 数据信息的新方法。
Markers & renderers
这些插件提供了将抽象数据转换为屏幕中图像的新的标记(marker)或路径(way),精通 GIS 的 Leaflet 用户也将这些称为符号。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
L.Donut | L.Circle 的扩展,允许定义外半径和内半径。 |
Demo | Falke-Design |
Leaflet.Arc | 该插件添加了 L.Polyline.Arc 函数,该函数包装了 arc.js 功能以创建大圆弧。 |
Demo | Alexey Gusev |
Leaflet.ArrowCircle | 用于显示带有方向箭头的圆圈的标记(Marker)扩展。 |
Demo | R.A. Porter |
Leaflet.Awesome-Markers | 多彩的、标志性的& 基于Font Awesome图标/Twitter Bootstrap图标的防视网膜标记。 |
Demo | Lennard Voogdt |
Leaflet.BeautifyMarkers | 轻量级插件,添加了没有图像的彩色标志性标记,并为最终用户提供了对样式的完全控制(即无限颜色和 CSS 样式)。 |
Demo | Muhammad Arslan Sajid |
Leaflet.bezier | 在两点之间画一条贝塞尔线,有一个动画的飞行对象。 |
Demo | Supun Praneeth |
Leaflet.BoatMarker | 使用 HTML Canvas 的船标记,用于显示带有航向和可选风信息的游艇和帆船。 |
Demo | Thomas Brüggemann |
Leaflet.Canvas-Markers | 在 Canvas 而不是 DOM 上显示标记。 |
Demo | Evgeniy Voynov |
Leaflet.CenterMarker | 通过拖动平移地图时保持固定在地图中心的标记。 可以在 我的地址是什么? 上看到实际效果。 |
Jonatan Heyman | |
Leaflet.ColorIcon | 使用 CSS 过滤器覆盖图标的颜色,并可以添加不同颜色的相同图标图像。 |
Demo | Maxence Martin (shevek) |
Leaflet.curve | 用于绘制贝塞尔曲线和其他复杂形状的 Leaflet 插件。 |
Demo | elfalem |
Leaflet.CustomLayer | Leaflet 插件 L.CustomLayer - 完全自定义图层。 |
Derek Li | |
Leaflet.EdgeMarker | 用于指示当前视图之外的功能存在的插件。 |
Demo | Gerald Pape |
Leaflet.ellipse | Leaflet.ellipse 通过指定中心点、半长轴、半短轴和向西倾斜的角度在地图上放置椭圆。 |
Demo | JD Fergason |
Leaflet.Extra-Markers | 无耻地抄袭 Awesome-Markers,提供更多形状、颜色和语义界面支持。 |
Demo | Cory Silva |
Leaflet.Geodesic | 绘制测地线和圆。 测地线是地球表面上两个给定点之间的最短路径。 它使用 Vincenty 的公式进行最高精度和距离计算。 用 Typescript 编写,可通过 CDN 获得。 |
Demo | Henry Thasler |
Leaflet.geojsonCSS | Geojson CSS 实现 Leaflet。 |
Demo | Alexander Burtsev |
Leaflet.GeotagPhoto | 照片地理标记插件,有两种模式:相机和十字准线。 |
Demo | Bert Spaan |
Leaflet.GLMarkers | 使用自定义 WebGL 着色器显示数千个标记,可选择动画。 |
Demo | Iván Sánchez Ortega |
Leaflet.greatCircle | Leaflet.js Polygon 对象的包装类,它绘制环绕地球的真正“大圆圈”(显示真正的测地线、球形路径)。 |
Demo | Alex Wellerstein |
Leaflet.HighlightableLayers | 通过添加边框并将它们提升到其他上方来突出显示 Leaflet 线条和多边形。 添加透明边框以增加鼠标/触摸交互的容差。 |
Demo | Candid Dauth |
Leaflet.Icon.Glyph | 在标记中使用图标字体字形(来自 Font Awesome、Material Design Icons、Glyphicons、Metro UI 图标、Elusive 和其他图标字体)。 |
Demo | Iván Sánchez Ortega |
Leaflet.label | 将文本标签添加到地图标记和矢量图层。 |
Jacob Toye | |
Leaflet.LabelTextCollision | 在路径(折线、多边形、圆)上显示标签,避免标签冲突。 |
Demo | Kenta Hakoishi |
Leaflet.LineExtremities | 使用 SVG 标记在折线的末端显示符号。 |
Demo | Frédéric Bonifas |
Leaflet.magicMarker | 加载时为标记添加神奇的动画效果。 |
Sylvenas | |
Leaflet.MakiMarkers | 使用 MapBox 中的 Maki 图标 创建标记。 |
James Seppi | |
Leaflet.Marker.Highlight | 为 L.marker 添加高亮特性。 |
Demo | Brandon Xiang |
Leaflet.Marker.Stack | CartoDB 的“stacked chips”符号器的纯 Leaflet 实现。 |
Demo | Iván Sánchez |
Leaflet.orientedMarker | 允许动态管理标记的方向。 |
jekuno | |
Leaflet.ParallaxMarker | 添加标记,在平移时相对于地图有视差效果的移动。 |
Demo | Dag Jomar Mersland |
Leaflet.pattern | 添加对路径上的图案填充的支持。 |
Tyler Eastman | |
Leaflet.Photo | 在 Leaflet 地图上显示带有地理标记照片的插件。 |
Demo | Bjørn Sandvik |
Leaflet-polygon-fillPattern-canvas | 继承 Polygon 对象,用图像模式填充 canvas 元素。性能比 svg 渲染更好。可以提高大数据的渲染性能。 |
bgx1012 | |
Leaflet Polyline Offset | 为 |
Demo | Benjamin Becquet |
Leaflet.PolylineDecorator | 允许你沿着折线或坐标路径绘制图案(如破折号、箭头或均匀间隔的标记)。 |
Demo | Benjamin Becquet |
Leaflet.RepeatedMarkers | 环绕地球时显示标记,每 360 度经度一次。 |
Demo | Iván Sánchez |
Leaflet.River | 在地图上绘制不同宽度的线条(如河流)。 当您想在地图上显示河流如何“流动”时很有用。 |
Demo | Grigory Golikov |
Leaflet Rotated Marker | 启用 Leaflet 中标记图标的旋转。 |
Demo | Benjamin Becquet |
Leaflet.RoughCanvas | Leaflet.RoughCanvas 呈现手绘草图样式矢量图(折线、多边形、geojson)。 |
Demo | haoming |
Leaflet.SpeechBubble | 用箭头弹出一个对话框,跟随 points, layer, markers 等。 |
Demo | Sylvain BRISSY |
leaflet-spline | 建立在 Leaflet.Curve 之上,leaflet-spline 绘制二次 bezier spline 基于一系列地理坐标。 |
Demo | Seth Lutske |
Leaflet.Sprite | 在标记中使用基于精灵的图标。 |
Calvin Metcalf | |
Leaflet.StarCircle | 在 Leaflet 上绘制三角形、正方形、星形(n角)。 |
Demo | Haelue |
Leaflet.streetlabels | 一个 Leaflet 插件,用于显示沿着折线路径的标签。 yakitoritabetai Leaflet.LabelTextCollision 的扩展。 |
Demo | 3Maps |
Leaflet.SvgShapeMarkers | 添加对其他 SVG 标记类型的支持,例如三角形、菱形和正方形。 |
Demo | Rowan Winsemius |
Leaflet Swoopy | 用于创建可自定义的 swoopy 箭头注释的插件。 |
Demo | webkid |
Leaflet.TextPath | 允许你沿折线绘制文本。 |
Demo | Mathieu Leplatre |
leaflet-tracksymbol2 | 用于在地图上显示航迹(三角形符号)和 AIS 联系人的插件。 这是以下插件的更新版本: |
Demo | ARL |
Leaflet Truesize | 一个用于创建投影感知的可拖动多边形和多段线的插件。 |
Demo | webkid |
Leaflet.VectorMarkers | Leaflet 的矢量 SVG 标记,带有 Font Awesome/Twitter Bootstrap 图标的选项。 |
Mathias Schneider | |
Leaflet.Viewpoint | 显示具有多个方向的 circleMarker。 用于显示从某一点拍摄的照片。 |
Demo | Grigory Golikov |
leaflet-ais-tracksymbol | Leaflet-tracksymbol 的 AIS 扩展 它在地图上显示 AIS 联系人。 |
Johannes Rudolph | |
leaflet-ais-tracksymbol-search | 为你的 Leaflet 地图和你的 leaflet-ais-trackymbol 添加一个搜索框。 |
Johannes Rudolph | |
Leaflet-arrowheads | 允许用户在多段线上快速绘制箭头,实现矢量可视化。 |
Demo | Slutske22 |
leaflet-choropleth | 扩展 L.geoJson,增加一个 choropleth 可视化(基于值的色标)。 |
Demo | Tim Wisniewski |
leaflet-corridor | 渲染一条宽度固定为米的多段线,而不是像素。根据缩放级别来调整宽度。 |
Demo | Mikhail Shilkov |
leaflet-distance-markers | 允许沿着路线(L.Polyline)以相等的距离(例如,每英里一个)显示标记。 |
Demo | Doroszlai, Attila |
leaflet-icon-pulse | 使用 CSS3 渲染脉冲图标。 它可用于位置标记。 |
Demo | mapshakers |
leaflet-labeled-circle | 特殊类型的 SVG 标记,里面有一个标签,可围绕锚点拖动。 |
Demo | Alexander Milevski |
leaflet-layervisibility | 扩展了 L.Layer 和 L.LayerGroup 的方法,可以隐藏/显示图层,而不需要删除/重新添加它们。 |
Demo | Philipp Loose |
leaflet-mapkey-icon | 基于 mapkeyicons 的制图字体图标集。 |
Demo | mapshakers |
leaflet-marker-direction | 显示标记的路径和方向。 |
Demo | Jack Zou |
leaflet-place-groups-picker | 用于Leaflet地图的插件,允许将位置分组,其可见度可以切换。 |
damianc | |
leaflet-polycolor | 给每个多线段着色。 |
Demo | Olivier Gasc |
leaflet-polygon.fillPattern | 扩展 Polygon 对象,用图像图案填充SVG路径元素。 |
Demo | CloudyBay |
Leaflet-semicircle | 为 |
Jieter | |
leaflet-simplestyle | 扩展 L.geoJSON 以支持 simple style 规范。 |
Demo | Rowan Winsemius |
Leaflet-SVGIcon | 一个简单和可定制的 SVG 图标,没有外部依赖性。还包括一个方便的 Marker 类和两个实例子类。 |
Demo | Ilya Atkin |
leaflet-usermarker | 用于在地图上绘制代表用户(或多个用户)的标记的插件,支持绘制精确圆。 可以在 Longitude.me 上看到。 |
Jonatan Heyman | |
OSM Buildings | 惊艳的 JS 库,用于在 Leaflet 之上实现 3D OSM 建筑几何的可视化。 |
Demo | Jan Marsch |
Overlay animations
这些插件对标记物或一些几何图形进行动画处理。另请参阅带时间或海拔的几何图形。
Clustering/Decluttering
当您显示大量数据时,这些插件将使您的地图看起来更干净。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet.ConditionalLayer | 一个在视口中不显示任何超过一定数量的可见标记的 FeatureGroup。 |
Demo | EPP |
Leaflet.Deflate | 当线条和多边形在较低的缩放级别中屏幕尺寸变得太小时,将其放缩为一个标记。 |
Oliver Roick | |
Leaflet.FeatureGroup.SubGroup | 一个简单的插件,用于创建 FeatureGroup,将其子层添加到父组中。典型的用法是通过 L.Control.Layers 来切换它们,动态地添加/删除 Leaflet.markercluster 中的标记组。 |
Demo | ghybs |
Leaflet.GridCluster | 实时创建基于网格的集群。 |
Demo | Andreas Kiefer |
Leaflet.inflatable-markers-group | 最优秀的 Leaflet marker cluster 插件的替代品。该插件为标记提供了两种状态:一种是膨胀的、正常的状态,另一种是放空的状态,这种状态显示的信息较少,占用的空间较小,并用于减少地图的混乱。 |
Demo | Laurent Georget |
Leaflet.LayerGroup.Collision | 为标记群提供碰撞检测。与聚类不同,它考虑到了标记的形状& 大小。 |
Demo | Iván Sánchez Ortega |
Leaflet.LayerGroup.Conditional | 根据任何条件控制要在组中显示的图层。例如,在低缩放级别上显示热图,在更高的缩放级别上显示标记。 |
Demo | Solfisk / Jørgen Elgaard Larsen |
Leaflet.markercluster | 美丽、复杂、高性能的标记聚类解决方案,具有流畅的动画和许多强大的功能。 推荐! |
Demo | Dave Leaver |
leaflet-tooltip-layout | 避免 tooltips 重叠并更容易找出每个 tooltips 和 marker 之间的关系的插件。 |
Demo | Zijing Peng |
Overlapping Marker Spiderfier | 以 Google 地球启发的方式处理重叠标记,点击时优雅地将它们分开。 |
Demo | George MacKerron |
PruneCluster | 快速和实时的标记聚类库。 |
Demo | Antoine Pultier |
q-cluster | 具有 D3 分类的快速点聚类库。 |
Demo | Nicholas Hallahan |
Heatmaps
这些插件使用矢量数据创建可视化的热力图或类似热力图的图像。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
HeatCanvas | 基于 HTML5 Canvas 的简单热力图 API。 |
Demo | Sun Ning |
heatmap.js | 基于 HTML5 Canvas 的热力图的 JavaScript 库。它的 Leaflet 层实现支持大型数据集,因为它是基于瓦片的,并使用四叉树索引来存储数据。 |
Demo | Patrick Wied |
Leaflet divHeatmap | 基于 CSS3 和 divIcons 的轻量级和多功能热力图。 |
Daniele Piccone | |
Leaflet.heat | 一个小巧、简单、快速的 Leaflet 热图插件。 在底层使用 simpleheat,另外将点聚集到网格中以提高性能。 |
Demo | Vladimir Agafonkin |
Leaflet.SmoothPolygons | 在后台使用 paperJS 在 Canvas 上绘制路径。 |
Demo | Sanchez Weezer |
Leaflet-Solr-Heatmap | 一个 Leaflet 插件,用于从 Solr 的 Heatmap Faceting 渲染热图和集群。 数百万个点或多边形的高性能。 |
Jack Reed | |
MaskCanvas | 用于可视化覆盖的 Canvas 图层。 |
Demo | Dominik Moritz |
WebGL Heatmap | 使用 WebGL 的高性能 Javascript 热力图插件。 |
Demo | Benjamin J DeLong |
DataViz
用于数据可视化的强大多用途库。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
geogrid.js | 显示由 ISEA3H 离散全球网格系统聚合的数据。 例如,数据可以通过使用 Measures REST(一种用于交付由网格聚合的数据的框架)或 geogrid(一个用于处理网格的库,以防您想手动聚合数据)。 |
F.-B. Mocnik, | |
jquery-storymap | 一个 jQuery 插件,用于在用户滚动段落时显示多个地图位置。 |
Demo | Atle Frenvik Sveen |
Leaflet.Canvas-Flowmap-Layer | LeafletJS 自定义地图层,用于映射对象、想法、人员等的流动,并在 HTML Canvas 上呈现贝塞尔曲线。 |
Demo | Jacob Wasilkowski |
Leaflet.D3SvgOverlay | 用于 D3 库的 SVG overlay 类。 支持缩放动画和缩放,无需重绘图层。 |
Demo | Kirill Zhuravlev |
Leaflet Data Visualization Framework | 新的标记、图层和实用程序类,用于轻松进行专题制图和数据可视化。 |
Scott Fairgrieve | |
leaflet-dataclassification | 为 GeoJSON 数据驱动的专题地图创建单步数据分类(Single-step data classification)、符号(symbology)和图例。 |
Demo | Dániel Balla |
Leaflet for R | 允许在 R 程序中使用 Leaflet,这是一种流行的用于统计分析和数据挖掘的编程语言。 |
Demo | RStudio team |
Leaflet.Gleo | 嵌入 Gleo 渲染器作为 Leaflet 图层。Gleo 是一个面向对象的通用 WebGL 制图渲染库。 |
Demo | Iván Sánchez Ortega |
Leaflet.glify.layer | Leaflet.glify 插件的附加组件,以提供更多的 Leaflet 惯用绑定。 为 GeoJSON FeatureCollections 提供快速的 webgl 渲染(目前仅限于多边形、线和点)。 |
Demo | onaci |
Leaflet.glify | 使用 WebGL 快速渲染大型 (+100MB) GeoJSON 数据集。 |
Demo | robertleeplummerjr |
antv/l7-leaflet | 使用 L7 大规模的 WebGL 驱动的地理空间数据可视化分析引擎,增强 Leaflet 大规模地理空间数据可视化 |
Demo | lzxue |
leaflet.migration | 这个插件可以添加图层到 Leaflet 中,用来显示迁徙,飞线。用户可以自定义标记,线,弹出框等。 |
Demo | Kakaka Hou |
leaflet.migrationLayer | Leaflet.migrationLayer 用于展示人口、航班、车辆、交通等迁移数据。 地图上的数据可视化。 |
Demo | Sylvenas |
Leaflet.PixiOverlay | 使用 Pixi.js 绘制和动画的 Leaflet overlay 类。 |
Demo | Manuel Baclet |
Leaflet.Quadtree | Leaflet.Quadtree 用于检索给定范围内的可见数据。 |
Demo | ibesora |
leaflet-echarts | Leaflet 的插件,用于加载 echarts 地图并使大数据可视化更容易。 |
Demo | wandergis |
leaflet-partition | 以不同的方式将区域划分为不同的部分,例如 voronoi(三角剖分)和六边形平铺。 |
Demo | locknono |
leaflet-velocity | 用 Leaflet 观察 velocity 图层。 |
Demo | Dan Wild |
mapbox-gl-leaflet | 从 Mapbox GL JS 绑定到 Leaflet API。 |
Demo | Tom MacWright |
RaphaelLayer | 允许你使用 Raphael 作为 Leaflet 地图上的图层,以实现高级动画和可视化。 |
Dynamic Methods |
Interaction with geometries/features
以下插件使用户能够与叠加数据互动:编辑几何图形,选择区域或特征,与时间维度互动,搜索特征并显示有关信息。
Edit geometries
允许用户创建、绘制、编辑和/或删除点、线和多边形。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet-Geoman | Leaflet 1.0 及更高版本的几何管理。 绘制、编辑、拖动、剪切、旋转、拆分、缩放、测量、捕捉和固定图层,如标记、CircleMarkers、折线、多边形、圆形、矩形、ImageOverlays、LayerGroups、GeoJSON、MultiLineStrings 和 MultiPolygons。 支持 polygons、canvas 模式等。 |
Demo | Sumit Kumar |
Leaflet.Clipper | 允许对两个多边形进行并集、差集、异或和交集操作。 |
Demo | will Farrell |
L.Control.PaintPolygon | 使用像 Paint[brush] 这样的圆形画笔绘制你的多边形。 包括 turf.js 依赖项。 |
Thibault Coupin | |
Leaflet.DraggableLines | 通过拖放添加/移动/删除路线、线和多边形上的点。 |
Demo | Candid Dauth |
Leaflet.draw.svg | Leaflet.Draw 的插件,允许在 Leaflet 地图上添加/移动/删除自定义 SVG 文件。 它允许将 SVG 定义为 XML 文本,并将其转换为可以由 Leaflet 显示为可编辑功能的 SVG 对象。 |
Demo | Robin Massink |
Leaflet.draw | 通过一个非常漂亮的带有图标和提示的用户友好界面,实现了多段线、多边形、矩形、圆和标记等绘图功能。 |
Jacob Toye | |
Leaflet.Editable.Polyline | 可编辑多段线:移动现有点、添加新点和分割多段线。 |
Demo | Tomo Krajina |
Leaflet.Editable | 轻量级的完全可定制和可控的绘图/编辑插件。 |
Demo | Yohan Boniface |
Leaflet.EditableHandlers | 一组插件,包括圆形编辑、测量工具和多边形边的标签。 |
Kartena | |
Leaflet.FreeDraw | 受 Leaflet.js 和 D3 创建 Zoopla 启发灵感而开发的自由手绘多边形的插件。 |
Demo | Wildhoney |
Leaflet.Illustrate | Leaflet.draw 的扩展,使用户可以直接在地图上输入注释。 |
Demo | Justin Manley |
Leaflet.MapPaint | 专为触摸设备设计的位图绘画插件。 |
Demo | Antoine Pultier |
Leaflet.Path.Drag | 多边形和折线的拖曳处理程序和交互。 |
Demo | Alexander Milevski |
Leaflet.Path.Transform | 多边形和折线的缩放、 旋转和交互操作。 |
Demo | Alexander Milevski |
Leaflet.Pather | L.Pather 是一个手绘多段线创建器,它简化了多段线的可变性。 需要 D3 支持。 |
Demo | Wildhoney |
Leaflet.Pin | 在使用 Leaflet.Draw 绘制或编辑功能期间启用将标记附加到其他图层。 |
Demo | Konrad Klimczak |
Leaflet.plotter | Leaflet 绘图仪允许你使用 Leaflet 驱动的地图创建路线。 你可以单击中点来创建一个新的可拖动点。 |
Demo | Nathan Mahdavi |
Leaflet.SegmentEdit | Leaflet.draw 的扩展,允许一次编辑大的多段线。 |
Demo | Lemaf |
Leaflet.SimpleMarkers | 用于添加和删除标记的轻量级 Leaflet 插件。 |
Jared Dominguez | |
Leaflet.Snap | 允许将可拖动标记捕捉到折线和其他图层。 |
Demo | Mathieu Leplatre |
Leaflet.Storage | 创建/更新/删除地图、标记、多边形、折线……并使用 API 将它们公开用于后端存储。 |
Yohan Boniface | |
Leaflet.StyleEditor | 允许使用 GUI 编辑要素(线、多边形等)和标记的样式。 |
Demo | Dennis Wilhelm |
Leaflet.trace | 扩展 Leaflet.draw,添加一组新工具,允许用户选择一条 L.geoJSON 线来跟踪或捕捉标记。 |
Demo | Alex Gilvarry |
Leaflet-Craft | 扩展 Leaflet.FreeDraw 并提供扩展功能,如 Undo-Redo、删除标记、多边形的动态区域计算、各种钩子/事件和内置控制栏等。 |
Demo | Sagarpreet Chadha |
Terra Draw | Terra Draw 的 TerraDrawLeafletAdapter 允许用户在 Leaflet 地图上创建、选择和编辑各种几何图形类型(点、线、多边形等)。 |
Demo | James Milner |
Time & elevation
大多数数据是二维的(经度和纬度),但有些数据有更多维度(高度和/或时间)。以下插件可以帮助用户浏览这些额外的维度。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
leaflet-calendar | leaflet-calendar 允许你添加日历选择器,并在选择日期时触发自定义函数。 |
Demo | Antonio Vida |
Leaflet.Elevation | 一个 Leaflet 插件,使用 d3 查看 GeoJSON 线的交互式高度剖面。 |
Demo | Felix Bache |
Leaflet.Heightgraph | 受 Leaflet.Elevation 的启发,这个 Leaflet 插件允许你查看以 GeoJSON 形式存储的交互式高度剖面,其特点是可以将任意分段(如表面类型或陡峭度类别)以自定义颜色存储在 GeoJSON 本身的属性中。 |
Demo | Robin Boldt |
Leaflet Hex Time Slider | 使用 leaflet + d3.js 和 nouislider 的极简时间滑块,使用 geoJSON 文件显示时间序列数据。 |
Demo | Albert Kochaphum |
Leaflet.hotline | 用于沿折线绘制渐变的 Leaflet 插件。 |
Demo | iosphere |
Leaflet.TimeDimension | 在 Leaflet 地图上添加时间维度功能。 |
Demo | ICTS SOCIB |
Leaflet Timeline Control | 无人知晓的时间线控件,帮助你显示时间序列数据。 |
Demo | Michal Zimmermann |
Leaflet.timeline | 在地图上显示任意的 GeoJSON,带有时间轴滑块和播放按钮。 |
Demo | Jonathan Skeate |
Leaflet.timelineSlider | Leaflet插件,创建一个可定制的时间轴滑块,具有用户设计的功能。 |
Demo | Sol Vitkin |
Leaflet Time-Slider | 通过使用 JQuery UI 滑块,Leaflet Time-Slider 使你能在地图上动态地添加和删除标记。 |
Demo | Dennis Wilhelm |
Leaflet Topography | 一套用于以闪电般的速度计算和可视化地形数据(海拔、坡度、长宽)的工具。 基于 Mapbox RGB 编码的 DEM 瓦片。 |
Demo | Seth Lutske |
leaflet.TrackPlayBack | 一个 Leaflet 曲目播放插件,可以显示和动态播放曲目。 |
Demo | linghuam |
LeafletPlayback | 播放与时钟同步的带时间戳的 GPS 轨迹。 |
Demo | Nicholas Hallahan |
Search & popups
搜索覆盖图层并增强如何显示有关覆盖图层的信息的插件。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
L.tagFilterButton | 按标签过滤 LeafLet 标记。 |
Demo | Mehmet Aydemir |
Leaflet.AnimatedSearchBox | 一个简单的 Leaflet 插件,提供一个可折叠的搜索框。 |
Demo | Luka Steinbach |
Leaflet.GeoJSONAutocomplete | 由 Leaflet 自动完成的,使用 GeoJSON 服务进行远程搜索。 |
Demo | Yunus Emre Özkaya |
Leaflet PinSearch | 用于可配置搜索栏组件的 Leaflet 插件,可自动完成地图上所有现有图钉(Pin)的搜索。 |
Demo | Ahmad El Mokahal |
Leaflet.PopupMovable | 这个插件使 L.Popup 可以通过用户拖动来移动,并自动绘制引线。 |
Demo | Yasuhiro Suzuki |
Leaflet.RevealOSM | 非常简单但可扩展的 Leaflet 插件,在地图上显示 OSM POI 数据。 |
Yohan Boniface | |
Leaflet.Rrose | 边缘案例的 Leaflet 插件。 当您希望在 mouseover 而不是 click 上弹出弹出窗口时使用,并且您需要在接近地图边缘时重新定位弹出提示。 |
Demo | Eric Theise |
Leaflet Search | 通过 LayerGroup/GeoJSON 中的自定义属性控制搜索标记/特征位置。 支持 AJAX/JSONP、自动补全和 3rd 方服务。 |
Demo | Stefano Cudini |
Leaflet Underneath | 使用 Mapbox Vector Tiles 数据在某个位置附近查找有趣的特征,以将交互式功能添加到具有速度和有限带宽的瓦片图层。 |
Per Liedman | |
Leaflet.utfgrid | 为 Leaflet 提供了一个 utfgrid 交互处理程序,占用空间非常小。 支持 Leaflet >= 1.0。 包括基本的鼠标悬停支持以及悬停时突出显示 UTFGrid 功能的能力。 |
Dave Leaver | |
leaflet-custom-searchbox | 一个谷歌地图风格的搜索框,其中包括一个侧面板滑块控件。 |
Demo | A.D |
leaflet-fusesearch | 一个提供面板的控件,可以使用轻量级的模糊搜索 Fuse.js 在 GeoJSON 层中搜索特征。 |
Demo | Antoine Riche |
Leaflet-gplaces-autocomplete | 在地图中添加谷歌地方搜索。 |
Michal Haták | |
leaflet-popup-modifier | 允许用户编辑弹出窗口的内容,或使用弹出窗口删除其源标记。 |
Slutske22 | |
leaflet-responsive-popup | 无需移动地图即可查看弹出窗口的内容。 |
Demo | YaFred |
Area/overlay selection
这些插件帮助用户选择地图中的覆盖层或区域。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet-Area-Selection | Leaflet-区域选择允许在地图上轻松选择一个多边形区域。 |
Demo | B-Open |
L.Control.LineStringSelect | 快速 LineString(polyline) 部分选择工具:选择复杂路径中两点之间的拉伸。 |
Demo | Alexander Milevski |
Leaflet.AreaSelect | 一个固定位置、可调整大小的矩形,用于选择地图上的一个区域。 |
Demo | Jonatan Heyman |
Leaflet.CheapLayerAt | 允许查询哪个图层在屏幕坐标之下。 |
Demo | Iván Sánchez Ortega |
Leaflet.FeatureSelect | 使用可配置的中心点标记从 GeoJSON 图层中选择任何几何类型。 |
Demo | Aaron Ogle |
Leaflet GeoJSON Selector | 用于从交互式列表和地图中的 GeoJSON 功能中进行选择的 Leaflet 控件。 |
Demo | Stefano Cudini |
Leaflet.SelectAreaFeature | 通过绘制区域选择地图上的要素图层。 |
Demo | Sandro Pibia |
leaflet-lasso | 套索选择插件。 |
Demo | Jan Zak |
Leaflet-Select-Polygons | Leaflet-Select-Polygons 允许选择多个多边形并调整基本地图视图。 |
Demo | Erick S Escalante Olano |
Leaflet-Shades | 一个可拖动且可调整大小的矩形,用于选择地图上的区域并在未选择的区域中创建灰色叠加图层。 |
Demo | Mandy Kong |
Map interaction
与地图本身交互的新方法。
Layer switching controls
以下插件用于增强或扩展 L.Control.Layers
。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
L.switchBasemap | 一个用来切换底图的简单的 Leaflet 插件。 |
Demo | clavijojuan |
Leaflet.ActiveLayers | 添加新的 L.Control.ActiveLayers 以获取地图上当前活动的图层。 |
vogdb | |
Leaflet.AutoLayers | 自动从多个地图服务器中提取图层,并使用用户控制的覆盖 zIndex 管理来组织/搜索它们。 |
Alex Ebadirad | |
Leaflet.Basemaps | 带有来自瓦片堆栈的预览图像的底图选择器。 示例 |
Demo | Brendan Ward |
Leaflet Categorized Layers | 为分类层组扩展的 Leaflet 图层控件 |
Robbie Trencheny | |
Leaflet.Control.Appearance | Control.Layers 的扩展,可以控制图层的外观——颜色、不透明度并能够移除覆盖层。 |
Kanahiro Iguchi | |
Leaflet.Control.Layers.Tree | L.Control.Layers 扩展,支持树结构,用于基础层和覆盖层。 简单且高度可配置。 |
Demo | Javier Jimenez Shaw |
Leaflet Control Order Layers | 添加在图层控件中更改叠加顺序的功能。 |
Michael Salgado | |
Leaflet.GroupedLayerControl | Leaflet 图层控制,支持将 overlays 图层组合在一起。 |
Demo | Ishmael Smyrnow |
Leaflet.LayerTreeControl | 一个 Leaflet 插件,用于将多种类型的图层分组到树形结构中。 |
Demo | Ignacio Fagian |
Leaflet.LayerTreePlugin | Leaflet 控件允许打开和关闭图层,并以树状方式显示它们。 |
Demo | Alexander Arakelyan |
Leaflet Panel Layers | 为图层组和图标图例扩展的 Leaflet 图层控件。 |
Stefano Cudini | |
Leaflet.SelectLayers | 一个 Leaflet 插件,它添加了新的控件以在地图上的不同图层之间切换。 新控件将 L.Control.Layers 单选按钮面板替换为选择标记。 |
vogdb | |
Leaflet.StyledLayerControl | 一个 Leaflet 插件,通过组织到类别或组来实现对图层的管理和控制。 |
Demo | Davi Custodio |
Leaflet.UniformControl | 带有样式复选框和单选按钮的 Leaflet 图层控件。 |
Demo | Chris Calip |
Leaflet-IconLayers | 将基础图层显示为小图标的 Leaflet 控件。 |
Demo | Alexander Zverev |
Interactive pan/zoom
改变用户在地图上交互移动的方式。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet.SyncView | Leaflet 的同步视图控件。 Drupal Leaflet Module 集成设计。 |
Demo | Wong Hoi Sing Edison |
L.Control.ZoomBar | Leaflet 原生缩放控件的扩展版本,带有 Home 和 Zoom-to-Area 按钮。 |
Demo | Elijah Robison |
Leaflet.BorderPan | 通过单击地图边界进行平移的 Leaflet 插件。 |
Sebastián Lara | |
Leaflet.BoxZoom | 一个可见的、可点击的控件,用于执行盒式缩放。 |
Demo | Greg Allensworth |
Leaflet.DoubleRightClickZoom | 通过双击右键实现缩放的交互处理程序。 |
Demo | Mike O'Toole |
Leaflet.DoubleTouchDragZoom | 用于单指缩放的插件。 |
Demo | Peter C |
Leaflet GameController | 为游戏手柄提供支持的交互处理程序。 |
Antoine Pultier | |
Leaflet LimitZoom | 插件将可用的缩放级别限制在一个给定的列表中,可以通过限制缩放或通过插值瓦片。 |
Demo | Ilya Zverev |
Leaflet.Pancontrol | 一个简单的平移控件。 |
Kartena | |
Leaflet.twofingerZoom | 触摸设备的交互处理程序,可通过两根手指的点击来实现缩放。 |
Adam Ratcliffe | |
Leaflet.ZoomBox | 一个轻量级的缩放框控件:在你想缩放的区域周围画一个框。 |
Demo | Brendan Ward |
Leaflet.zoominfo | 一个显示当前缩放级别的缩放控件。 |
Demo | Flávio Carmo |
Leaflet.ZoomLabel | 一个简单的缩放标签控件。 |
Demo | Masashi Takeshita |
Leaflet.ZoomPanel | Leaflet 的缩放控制面板。 |
Demo | Shuhua Huang |
Leaflet.zoomslider | 一个缩放滑块控件。 |
Demo | Kartena |
Bookmarked pan/zoom
通过跳转到预定义/存储的位置来改变用户在地图上移动的方式。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet.ResetView | Leaflet 的重置视图控件。 Drupal Leaflet Module 集成设计。 |
Demo | Wong Hoi Sing Edison |
Leaflet.Bookmarks | 控制在地图上用户创建的书签之间添加和导航。 |
Demo | Alexander Milevski |
Leaflet.defaultextent | 返回到地图原始起始范围的控件。 类似于 HomeButton 小部件。 |
Alex Nguyen | |
Leaflet Locationlist | 在预定义位置和缩放之间跳转的控件。 |
Ivan Ignatyev | |
Leaflet Navigation Toolbar | 用于简单的后退、前进和主页导航的 Leaflet 控制。 |
Demo | David C |
Leaflet.RestoreView | 使用 localStorage 存储和恢复地图视图。 |
Demo | Mathieu Leplatre |
Leaflet.ShowAll | 一个可以显示预定义范围的控件,同时保存当前的范围,以便可以跳回。 |
Demo | Mor Yariv |
Leaflet.viewcenter | 一个简单的控件,它添加了一个按钮来改变视图和缩放到选项中的预定义值。 |
Demo | Dariusz Pawlak |
Leaflet.zoomhome | 带有用于重置视图的主页按钮的缩放控件。 |
Demo | Florian Brucker |
leaflet-hash | 通过 URL 哈希保持地图状态和浏览历史的插件。 |
Demo | Michael Lawrence Evans |
Leaflet-History | 类似于浏览器跟踪地图移动和缩放位置的历史记录。 |
Demo | Chris Scott |
leaflet-view-meta | 用于显示地图视图元数据、中心和边界坐标并将其保存到 URL,以进行精确共享和视图重建的插件。 |
Demo | rwev |
leaflet-zoom-min | 向缩放控件添加一个按钮,允许你单击一下即可缩放到地图的最小缩放级别。 |
Alan Shaw |
Fullscreen controls
允许以全屏模式显示地图。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
leaflet.fullscreen | 另一个全屏按钮控件,但适用于现代浏览器,使用 HTML5 Fullscreen API。 |
Demo | Bruno B |
Leaflet.fullscreen | 使用 Fullscreen API 的全屏按钮控件。 |
Demo | jfirebaugh |
leaflet.zoomfs | 全屏按钮控件。 |
Eli Dupuis |
Minimaps & synced maps
同时显示两张地图。其中一个可能是不同的尺寸和缩放级别,可作为最小地图使用,以帮助用户进行导航。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
leaflet.WorldMiniMap | 一个小地图,在世界小地图上显示地图视图以帮助导航。 |
Demo | M. Friedl |
Leaflet.GlobeMiniMap | 简单的小地图控件,将 3D 地球仪放置在地图的角落,与主地图位于同一位置。 |
Demo | Chris Whong |
Leaflet.layerscontrol-minimap | 使用同步的小地图扩展默认的 Leaflet 图层控件。 |
Jieter | |
Leaflet.MagnifyingGlass | 允许你以另一个缩放级别显示地图的一小部分,无论是在固定位置还是与鼠标移动相关联,以获得放大镜效果。 |
Benjamin Becquet | |
Leaflet.MiniMap | 一个小的迷你地图以不同的比例尺显示地图,以帮助导航。 |
Demo | Robert Nordan |
Leaflet.Sync | 两个地图的同步视图。 |
Demo | Bjørn Sandvik |
leaflet-clonelayer | 克隆 Leaflet 图层,以允许在同一运行时间内的不同地图中重复使用。 |
Jieter |
Measurement
允许用户测量距离或面积。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet.LinearMeasurement | Leaflet 线性测量插件,可沿路径创建具有增量测量的折线。 |
Demo | New Light Technologies |
Leaflet Measure Path | 显示路径上的测量值; 当前支持折线、多边形和圆。 |
Demo | Per Liedman |
Leaflet.MeasurePolygon | MeasurePolygon allows you to calculate the area and perimeter of a polygon when drawing, very visible and didactics. |
Demo | Erick S. Escalante Olano |
Leaflet.MeasureAreaControl | 控制测量元件的面积。 |
Demo | Ondrej Zvara |
Leaflet.MeasureControl | 在地图上测量距离的简单工具(依靠 Leaflet.Draw)。 |
Demo | Makina Corpus |
Leaflet.nauticscale | 在 Leaflet 地图上显示航海比例。 |
Johannes Rudolph | |
Leaflet.PolylineMeasure | 测量简单的线和复杂的折线的大圆距离。 |
Demo | PPete |
Leaflet.QgsMeasure | Leaflet 控件可以像 Qgis Ruler 一样测量地图上的线段距离。 |
Demo | Gabriel Russo |
Leaflet.ScaleFactor | 显示 Leaflet 地图的比例因子(例如 1:50,000)。 |
Demo | Marc Chasse |
leaflet-graphicscale | 动画图形比例控件。 |
Demo | Erik Escoffier |
leaflet-measure | Leaflet 地图的坐标、线性和面积测量控件。 |
LJA GIS | |
leaflet-reticle | Leaflet 控件添加了一个由独立计算的纬度和经度刻度组成的居中标线。 |
Demo | rwev |
leaflet-ruler | 一个简单的 Leaflet 插件,用于测量点击点之间的真实方位和距离。 |
Demo | Goker Tanrisever |
Mouse coordinates
以不同方式显示鼠标光标下的地理坐标。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet Coordinates Control | 捕捉鼠标点击并显示其坐标,并可以进行轻松复制。 |
Demo | Michal Zimmermann |
Leaflet.Coordinates | 查看鼠标 LatLng 坐标的简单 Leaflet 插件。 还可以在用户输入上查看带有坐标弹出窗口的标记。 |
Demo | Felix Bache |
Leaflet.CoordProjection | 在鼠标移动时显示坐标并根据给定的投影显示它。 |
Demo | Edi Hasaj |
Leaflet Copy Coordinates Control | 与 Leaflet 一起使用以捕获地图上的鼠标点击,并以一种简单的复制方式显示相关坐标。 (源自 zimmicz 的原创作品。fork 主要是为了提供 npm 功能。) |
Demo | Chaim Krause |
Leaflet Location Picker | 带有迷你 Leaflet 地图的简单位置选择器。 |
Demo | Stefano Cudini |
Leaflet.MapCenterCoord | 用于显示地图中心坐标的 Leaflet 控件,在触摸/移动设备上特别有用。 |
Demo | Xisco Guaita |
Leaflet.Mapcodes | 在鼠标移动时显示鼠标指针的 Mapcode。 |
Demo | Martin Atukunda |
Leaflet.mouseCoordinates | 在框中显示鼠标坐标。 支持多种格式:GPS、UTM、UTMREF / MGRS、QTH。 |
Johannes Rudolph | |
Leaflet.MousePosition.ts | 用 TypeScript 编写的完全可定制的坐标查看器。 您可以通过使用 JSX 创建自定义组件来更改此插件的外观。 |
Demo | Yuuki Toriyama |
Leaflet.MousePosition | 一个简单的 MousePosition 控件,显示鼠标指针在地图上移动时的地理坐标。 |
Ardhi Lukianto | |
Leaflet.NACCoordinates | 显示鼠标移动时鼠标指针的 NAC 坐标。 |
Mahmood Dehghan |
Events
这些插件扩展了 Leaflet 的事件处理的能力。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
L.DraggableEnhancer | 修改默认的 L.Draggable 处理程序(负责地图平移,…)以使其正常工作,如果地图容器的父级之一具有预定义的处理程序,例如附加到 “mousemove” 事件的 “event.stopPropagation()”。 |
Vincent Dechandon | |
L.Sleep | 避免不必要的滚动捕获。 |
Demo | atstp |
L.Spotlight | 使用可自定义的形状动态突出显示鼠标光标附近的特征。 |
Isaac Boates | |
Leaflet.AlmostOver | 当光标“几乎”在图层上时触发鼠标事件。 |
Demo | Mathieu Leplatre |
Leaflet.ClickTolerance | 此插件允许你增加 Canvas 驱动图层的点击容差,从而可以将矢量图层的可点击区域增加到其可见范围之外。 当您的功能难以点击时很有用。 |
Geoloep | |
Leaflet.ControlledBounds | 受 Leaflet-active-area 启发,自动检测地图中未被任何地图控件覆盖的最大区域,并将 setView、fitBounds、setZoom、getBounds 应用于该区域。 |
Iván Sánchez Ortega | |
Leaflet.GestureHandling | 将谷歌地图手势处理的基本功能带入 Leaflet。 防止用户在滚动长页面时被困在地图上。 |
Demo | Andy Marquis |
Leaflet.OverIntent | 添加一个新事件 “mouseintent”,它与 “mouseover” 不同,因为它反映了用户瞄准特定图层的意图。 |
Demo | Mathieu Leplatre |
Leaflet Touch Helper | 通过添加透明、更大的触摸表面,可以在小型显示器上用粗手指轻松触摸矢量 overlay 图层 |
Demo | Per Liedman |
Leaflet.VisualClick | 当用户单击/点击地图时添加视觉反馈。 当服务器请求或 Leaflet.singleclick 的实现延迟进一步操作时很有用。 仅使用 Leaflet 1.0.0-beta1 进行测试。 |
Demo | Dag Jomar Mersland |
Leaflet-active-area | 此插件允许你使用地图的较小部分作为活动区域。 所有定位方法(setView、fitBounds、setZoom)都将应用于此部分而不是所有地图。 |
Demo | Mappy |
singleclick | 扩展 |
Demo | Iván Sánchez Ortega |
User interface
按钮、滑块、工具栏、侧边栏和面板。
Print/export
打印或导出你的地图。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet.BigImage | 允许用户下载带有放大版可见地图的图像。 |
Demo | Vasyl Pasichnyk (Oswald) |
leaflet.browser.print | 允许用户直接从浏览器打印整页地图。 |
Demo | Igor Vladyka |
Leaflet.print | 实现 Mapfish 打印协议,允许使用 Mapfish 或 GeoServer 打印模块打印 Leaflet 地图。 |
Adam Ratcliffe | |
Leaflet-easyPrint | 一个简单的插件,它添加了一个图标来打印你的 Leaflet 地图。 |
Demo | Rowan Winsemius |
Leaflet-image | 使用 Canvas 和 CORS 从 Leaflet 地图中导出图像,无需服务器组件。 |
Demo | Tom MacWright |
leaflet-route-print | 通过用一连串相同的矩形覆盖路线,自动打印具有自定义比例、纸张大小和空白的路线(即多线)的 PDF。 |
Demo | Herman Sletmoen |
Geolocation
扩展 Leaflet 地理定位功能的插件。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Geolet | Leaflet 的一个简单但高度可定制的地理定位插件。 |
Demo | Ruben Holthuijsen |
L.LocationShare | 允许用户发送和接收带有消息的标记。 |
Demo | atstp |
Leaflet.AccuratePosition | Leaflet.AccuratePosition 旨在提供所需的设备位置精度。 |
Demo | Michael Schmidt-Voigt |
Leaflet Control Compass | 用于构建简单旋转指南针的 Leaflet 控制插件。 |
Demo | Stefano Cudini |
Leaflet.Locate | 可自定义的定位控件。 |
Demo | Dominik Moritz |
Miscellaneous
Geoprocessing
以下插件可进行多种地理信息处理(点、线和多边形上的数学和拓扑操作)。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
arc.js | 一个用于绘制可与 Leaflet 一起使用的大圆圈路线的 JS 库。 |
Dane Springmeyer | |
Greiner-Hormann | Greiner-Hormann 算法用于多边形裁剪和二元运算,适用于 Leaflet。 |
Demo | Alexander Milevski |
Leaflet.Antimeridian | 一个插件,允许多边形和折线自然地穿过反子午线(或国际日期变更线),而不是总是环绕格林威治子午线。 |
Demo | Brianna Landon |
Leaflet.buffer | 使得用 Leaflet.draw 绘制的图形能够得到缓冲。 |
Jonathan Skeate | |
Leaflet.GeometryUtil | Leaflet 几何图形的实用程序集合(线性参考等) |
Benjamin Becquet | |
Leaflet.LayerIndex | 一个高效的特征和层的空间索引,使用 RTree.js。 |
Demo | Mathieu Leplatre |
Leaflet.UTM | 将 L.LatLng 转换为 UTM(WGS84),反之亦然的简单方法。UTM 字符串格式易于配置。它不依赖于任何其他插件或第三方。 |
Demo | Javier Jimenez Shaw |
Leaflet-pip | 使用 point-in-polygon 计算多边形中的简单点。 |
Demo | Tom MacWright |
leaflet-spatial-prefix-tree | 用于可视化空间前缀树、四叉树和 geohash 的 Leaflet 插件。 |
Demo | Mapzen |
Proj4Leaflet | Proj4js 集成插件,让你可以在 Leaflet 中使用各种奇怪的投影。 |
Demo | Kartena |
Routing
以下插件使用外部服务来计算驾驶或步行路线。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Leaflet.Reachability | 使用 openrouteservice isochrones API,根据时间或距离显示不同旅行方式的可到达区域。 |
Demo | Trafford Data Lab |
Leaflet RouteBoxer | 这是一个来自 Google 的 RouteBoxer 类的 Leaflet 实现。Leaflet RouteBoxer 类生成一组 L.LatLngBounds 对象,保证覆盖路径指定距离内的每个点。 |
Demo | Stephan Georg |
Leaflet RouteToAddress | 控制从自定义地址到固定地址的路线搜索。插件集成了一个简单的地理编码器,它使用 OpenstreetMap Nominatim 按地址定位地点。 非常适合在网站上描述“找到我们的路”的方向。 默认使用 OSRM,但也支持 Mapbox Directions API。 |
Demo | Astrid Günther |
Leaflet.Routing.Amap | 使用 AMap (高德地图)作为后台进行路线搜索的控制。支持中国的 BD09 和 GCJ02 坐标系,彩色线条,以及弹出的转弯提示。 |
Demo | Jack Good |
Leaflet Routing Machine | 通过点控制路线搜索,显示行程和替代路线。 默认使用 OSRM,但也支持 GraphHopper、Mapbox Directions API 等。 |
Demo | Per Liedman |
Leaflet.Routing | Leaflet 控制器和接口,用于使用任何用户提供的路由服务在航点之间选择路径。 |
Norwegian Trekking Association | |
leaflet.TravelNotes | 独立的应用程序,具有可编辑的标记和用于传单的路由引擎。路由引擎有 Mapbox、GraphHopper 和 OSRM 的插件,可用于汽车、自行车或行人路线。 |
Demo | Christian Guyette |
Leaflet TripGo routing | TripGo 移动平台让你创建应用程序,使用任何公共、私人或商业运输方式提供无缝和个性化的门到门旅行。TripGo 传单的插件动机是提供一种简单的方法,将其功能纳入外部平台。 |
Demo | SkedGo |
Targomo JS | Targomo 将一组起点在给定时间内可到达的区域可视化,并提供详细的路线信息(步行、自行车、汽车和公共交通)到目标。 |
Demo | Targomo GmbH |
Geocoding
将地址或地点名称转换为纬度和经度(反之亦然)的外部服务。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Esri Leaflet Geocoder | 一个由 ArcGIS Online 地理编码器提供建议的地理编码控件。 |
Demo | Patrick Arlt |
Geocoding from MapTiler | 基于 MapTiler Geocoding API 的 Leaflet 的地理编码和反向地理编码插件,其中包括州、城市、街道的识别,直至地址和 POI等级。它支持多种语言的搜索结果、每个国家的限制、模糊匹配、自动完成等。 |
Demo | M. Ždila | MapTiler |
L.Highlight | 一个插件,增加了使用 Nominatim 快速突出显示街道和地区的功能。 |
Demo | Maciej Kowalski |
Leaflet.Autocomplete | Leaflet.Autocomplete 是扩展 autosugestion 插件,能够以您认为需要的方式在地图上进行地理编码和显示数据。 DEMO 基于使用 OpenstreetMap Nominatim 按地址定位地点。 可访问,完全支持 ARIA 属性和键盘交互。 |
Demo | Grzegorz Tomicki |
Leaflet Control Bing Geocoder | 一个使用 Bing 定位地点的简单地理编码器控件。 您可能还对其 fork Leaflet Control Geocoder 感兴趣。 |
Demo | Samuel Piquet |
Leaflet Control Geocoder | 一个简洁和可扩展的控件,用于地理编码和反向地理编码。内置支持 Nominatim, Bing, MapQuest, Mapbox, What3Words, Google 和 Photon。易于扩展到其他供应商。 |
Per Liedman | |
Leaflet Control OSM Geocoder | 一个简单的地理编码器,使用 OpenstreetMap Nominatim 按地址定位地方。 |
Demo | Karsten Hinz |
Leaflet Geoapify Address Search | 向地图添加地址自动完成字段,由 Geoapify 提供支持。 |
Demo | Geoapify |
Leaflet GeoIP Locator | 一个简单的插件,可以找到IP地址的大致位置和以所述位置为中心的地图。 |
Jakub Dostal | |
Leaflet.Geonames | 由 GeoNames 提供支持的轻量级地理编码控件。 |
Demo | Brendan Ward |
Leaflet GeoSearch | 小型地理编码插件,为 Leaflet 带来地址搜索/查询(又称地理搜索)。 |
Demo | Stephan Meijer |
Leaflet LocationIQ Geocoder | 一个插件,增加了使用 LocationIQ 搜索(地理编码)由 Leaflet 驱动的地图的能力。 |
Demo | LocationIQ |
Leaflet.OpenCage.Geocoding | 一个插件,使用 OpenCage 的地理编码 API 进行正向或反向地理编码。 |
Demo | OpenCage |
Leaflet.OpenCage.Geosearch | 使用 OpenCage 的地理搜索 进行位置自动建议的插件。 |
Demo | OpenCage |
Leaflet-search | 一个具有自动完成/建议功能的搜索控件。支持 Nominatim、GeoNames、Here、TomTom 和 Kadaster(荷兰)。 |
Demo | Sjaak Priester |
Pelias Leaflet Plugin | Demo | Lou Huang |
Plugin collections
横跨几个类别的插件集。
插件开发人员:请将未来的插件保存在单独的存储库中。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
MapBBCode-related leaflet plugins | 七个用于各种功能的插件,独立于 MapBBCode 库。从圆形和弹出式图标到按钮、图层切换器、更好的搜索和属性。 |
Ilya Zverev | |
Plugins by Pavel Shramov | 一组插件用于:GPX、KML、TOPOJSON 图层; 必应瓦片图层; Yandex 图层(通过其 API 实现)和永久链接控件。 |
Pavel Shramov | |
Spectrum4Leaflet | 使用 Spectrum Spatial Server 服务与 leaflet 的工具。这个插件支持:地图服务、瓦片服务、特征服务。它有图层、图例和特征控制。 |
SVoyt |
Integration
Frameworks & build systems
将 Leaflet 集成到一个开发框架中,或为复杂的应用程序自动处理一些 javascript/CSS 工作,以简化你的开发工作。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
Angular Leaflet directive | 将 Leaflet 集成到使用 AngularJS Web 框架制作的应用程序中。 |
Demo | David Rubert |
Django Leaflet | 在你的 Django 项目中使用 Leaflet。 包括管理集成、表单小部件、模板标签等等! |
Makina Corpus | |
ember-leaflet | 使用 Leaflet 对 Ember.js 进行简单的声明式映射。 |
Miguel Andrade | |
gwty-leaflet | Leaflet 的 Java/GWT JsInterop 包装器。 它允许在 Java 中使用 Leaflet,就像使用 javascript 脚本一样。 |
Zakaria Amine | |
JSF2Leaf | Leaflet 的 JavaServer Faces 包装器。 |
Leonardo Ciocari | |
L.Control.BootstrapModal | 使用地图控件触发引导模式。 |
Greg Allensworth | |
L.Control.jQueryDialog | 使用地图控件触发 jQuery UI 对话框/模态框。 |
Demo | Greg Allensworth |
Leaflet.a11y | Leaflet 的可访问性和本地化/翻译插件。 |
Demo | Nick Freear |
Leaflet Control Angular | 在 Leaflet 地图中插入和使用 Angularized HTML 代码作为 Leaflet 控件。 |
Grant Harris | |
Leaflet.CSS | 在 JavaScript 中添加主要的 Leaflet CSS 文件(或任何 css),没有条件注释。 |
Demo | Calvin Metcalf |
Leaflet.i18n | Leaflet 的国际化插件。 |
Yohan Boniface | |
Leaflet.jsf | Leaflet 的综合 Java Server Faces (JSF) 组件/包装器。 |
Terra SI LLC. | |
Leaflet LayerConfig | 提供一个 json 文件或服务响应,其中包含图层和标记的配置,用来自动设置一个 Leaflet 客户端。 |
Alexander Nossum | |
Leaflet Map Builder | 它从一个配置对象中填充 Leaflet 地图,还可以创建缩放、图层、归属的绘制控件。 |
Demo | Gherardo Varando |
Leaflet map component | 将 Leaflet 集成到使用 Polymer 0.5 Web 框架制作的应用程序中。 |
Demo | Prateek Saxena |
Leaflet Popup Angular | 在你的 Leaflet popups 中使用 AngularJS。它扩展了内置的 L.popup.Action。 |
Demo | Grant Harris |
Leaflet Yeoman Generator | Yeoman 生成器,用于构建基本的 Leaflet 地图应用程序。 |
Demo | Moritz Klack |
Leaflet ZoomLevel CSS Class | 将缩放级别 css 类添加到地图元素,以便根据缩放级别轻松更新样式。 |
Dag Jomar Mersland | |
leaflet-defaulticon-compatibility | 从 CSS 中检索所有 Leaflet 默认图标选项,特别是所有图标图像 URL,以提高与修改 CSS 中 URL 的捆绑程序和框架的兼容性。 特别是对于 webpack(带有样式、css、文件和 url-loader)、Rails 资产管道和 Django 管道。 应该解决与 issue Leaflet/Leaflet #4968 相关的所有用例。 使用 webpack 演示(和 没有这个插件。 |
Demo | ghybs |
leaflet-geoserver-request | Leaflet 中的基本地理服务器请求。目前支持 Leaflet 上的 wms, wfs, legend, wmsImage 请求。 |
Demo | Iamtekson |
leaflet-map | 将 Leaflet 集成到使用 Polymer >= 1.0 Web 组件框架制作的应用程序中。 |
Demo | Hendrik Brummermann |
leaflet-rails gem | 这个 gem 为你的 Rails 5 应用程序提供了 leaflet.js 地图显示库。 RubyGems 上的 leaflet-rails |
Akshay Joshi | |
meteor-leaflet | 提供 Meteor 包,快速构建实时跨平台地图应用。 |
Bevan Hunt | |
ngx-leaflet | 用于 Angular.io 的 Leaflet 组件和扩展。 |
Asymmetrik, Ltd. | |
react-leaflet | 用于 Leaflet 地图的 React 组件。 |
Demo | Paul Le Cam |
Tiny Leaflet Directive | 用于 AngularJS 应用程序的 Tiny LeafletJS 映射指令。 |
Martin Tesař | |
V-Leaflet | 使用 Leaflet 作为 Vaadin Java/HTML 框架的组件。 |
Matti Tahvonen | |
Vue2Leaflet | Vue2Leaflet 是一个用于 Vue.js 框架的 JavaScript 库,它封装了Leaflet,使其能够轻松创建反应式地图。 |
Demo | Mickaël KoRiGaN |
YAGA leaflet-ng2 | 细致地整合到 Angular2/4。 |
YAGA Development Team |
3rd party integration
以下插件将 Leaflet 集成到第三方服务或网站中。
插件 | 说明 | Demo | 维护者 |
---|---|---|---|
ABP Usermap MyBB | 一个用于 MyBB 的插件,基于 Open Street Map 和 Leaflet 创建用户地图,并可自定义 Popup 和 Markers。 |
CrazyCat | |
Joomla! (3.x) | Astrid Günther | ||
Leaflet Easymap | 在你的 HTML 页面中引入地图,无需一行编程。 一个数据驱动的 Javascript 模块。 |
Demo | Klaus Stein |
Leaflet.EditInOSM | 在主要的 OSM 编辑器上添加一个带链接的控件来打开当前地图视图。 |
Demo | Yohan Boniface |
Leaflet.Facebook | 一个简单的插件,用于添加 Facebook like 按钮作为控件。 |
Marcin Wasilewski | |
Leaflet for Drupal | 一个 Drupal(7.x 和 8.x)模块,将 Leaflet 地图整合到你的 Drupal 网站中。它包含一个字段格式化器来显示包含地理空间数据的字段的地图,整合 Views 来在地图上绘制数据,以及一个轻量级和易于使用的 API。目前有超过 10,000 个网站在使用。 |
Marzee Labs | |
Map Block Leaflet | 基于 Leaflet 的新 WordPress 块编辑器的块,它允许从可视界面添加和自定义地图。 |
Jesús Olazagoitia | |
Maps Marker Pro | 一个 WordPress 插件/综合地理内容管理系统,允许用户固定、组织和分享他们最喜欢的地方和轨迹以及海拔图表。 还集成了几个 leaflet 插件,如 leaflet-bing-layer、leaflet-edgebuffer、leaflet-fullscreen、leaflet-gesture-handling、leaflet-minimap、leaflet.gridlayer.googlemutant、leaflet.locatecontrol、leaflet.markercluster 和 leaflet-geoman-free。 |
Demo | Robert Harm |
Maptiks | Web 地图的分析平台。 跟踪地图活动、图层加载时间、标记点击等等! |
Sparkgeo | |
WordPress Leaflet Map | 交互式和灵活的 shortcode ,在文章和页面中创建多个地图,并在这些地图上添加多个标记。 |
Benjamin J DeLong | |
Locations and Areas | WordPress 插件,在一张地图上展示广泛分布的地点,并有额外的区域导航标签。该地图基于 Leaflet JS,为您提供几种免费的地图样式。包括 Gutenberg 块。 |
100plugins | |
WP MapIt | 易于使用的 WordPress 地图插件,基于 Open Street Map 和 Leaflet,带有自定义标记图像、描述和链接。 |
Chandni Patel | |
Open User Map | WordPress 插件可让你的访问者直接从前端添加位置 - 无需注册。 他们在地图上放置一个标记并提供一些位置详细信息。 提交后,位置提案将处于“待定”状态,等待你的审核批准发布。 |
Demo | 100plugins |
WP-Trip-Summary | 一个 WordPress 旅行摘要插件,可帮助旅行博主管理和显示有关其乘坐火车、骑自行车或远足旅行的结构化信息。 |
Demo | Alexandru Boia |
Yii2-locator | Yii2 PHP Framework 的 Leaflet 小部件。 存储在 ActiveRecord 中的地理数据可以在交互式地图上显示和更新。 |
Demo | Sjaak Priester |
Develop your own
Leaflet 保持简单。如果你能想到一个并非所有 Leaflet 用户都需要的功能,并且你能以一种可重复使用的方式编写 JavaScript 代码,你就已经有了一个 Leaflet 插件。
对于如何创建自己的插件没有硬性要求,但我们鼓励所有的开发者阅读插件指南中的建议。
一旦您的插件准备就绪,您就可以将其提交到此列表:只需将添加到 /docs/plugins.md 的 PR 发送到我们的 GitHub 存储库。