| layout | title | bodyclass |
|---|---|---|
v2 |
Tutorials |
examples |
这里的每个教程都包含详细的代码说明，所以即使对于初学 JavaScript 的开发人员来说也很容易。
{% include tutorial_link.html page="quick-start/" thumbnail="quick-start/thumbnail.png" title="Leaflet 快速入门指南" description="一个简单的快速入门指南，可帮助你快速入门 Leaflet 的基础知识，包括在页面上设置 Leaflet 地图（使用 Mapbox 瓦片图层）、使用标记、折线和弹出窗口，以及处理事件。" %}
{% include tutorial_link.html page="mobile/" thumbnail="mobile/thumbnail.png" title="在移动端使用 Leaflet" description="在本教程中，你将学习如何为 iPhone、iPad 或 Android 手机等移动设备创建一个全屏地图，以及如何轻松检测和使用当前的用户位置。" %}
{% include tutorial_link.html page="custom-icons/" thumbnail="custom-icons/thumbnail.png" title="使用带有自定义图标的标记（Marker）" description="在本教程中，你将学习如何轻松定义你自己的图标并放在地图上作为标记使用。" %}
{% include tutorial_link.html page="accessibility/" thumbnail="accessibility/thumbnail.png" title="无障碍地图" description="一个基础的 Leaflet 无障碍指南，它能够让残障人士也能够使用你的地图。" %}
{% include tutorial_link.html page="geojson/" thumbnail="geojson/thumbnail.png" title="在 Leaflet 中使用 GeoJSON" description="在本教程中，你将学习如何创建并与由 GeoJSON 对象创建的矢量地图进行交互。" %}
{% include tutorial_link.html page="choropleth/" thumbnail="choropleth/thumbnail.png" title="互动式 choropleth 地图" description="一个使用 GeoJSON 和一些自定义控件创建美国各州人口密度的彩色交互式 choropleth map 的研究案例。 通常新闻网站会喜欢这个。" %}
{% include tutorial_link.html page="layers-control/" thumbnail="layers-control/thumbnail.png" title="Layer Groups 和 Layers Control" description="这是一个有关如何管理图层组和使用图层切换控件的教程。" %}
{% include tutorial_link.html page="zoom-levels/" thumbnail="zoom-levels/thumbnail.png" title="Zoom levels 缩放比例" description="更深入地了解地图的缩放比例。" %}
{% include tutorial_link.html page="crs-simple/crs-simple.html" thumbnail="crs-simple/thumbnail.png" title="Non-geographical maps" description="L.CRS.Simple 的入门教程，介绍如何制作一个没有 “latitude” 和 “longitude” 概念的地图。" %}
{% include tutorial_link.html page="wms/wms.html" thumbnail="wms/thumbnail.png" title="WMS 和 TMS" description="如何与专业 GIS 软件的 WMS 和 TMS 服务整合。" %}
{% include tutorial_link.html page="map-panes/" thumbnail="map-panes/thumbnail.png" title="使用 map panes" description="默认的 map panes 如何在图层顶部显示 overlay，以及如何覆盖它。" %}
{% include tutorial_link.html page="overlays/" thumbnail="overlays/thumbnail.gif" title="Overlays: Image, Video, SVG" description="Leaflet 可以帮助你在地图上的某处显示图片、视频和 SVG 元素。" %}
以下教程介绍了如何为 Leaflet 创建插件，仅适用于具有 JavaScript 经验的开发人员：
{% include tutorial_link.html page="extending/extending-1-classes.html" thumbnail="extending/thumbnail-1.png" title="扩展 Leaflet: Class Theory" description="Leaflet 的类、类继承和约定的概述。" %}
{% include tutorial_link.html page="extending/extending-2-layers.html" thumbnail="extending/thumbnail-2.png" title="扩展 Leaflet: Layers" description="如何使用特定的入口点来扩展图层或创建新的图层。" %}
{% include tutorial_link.html page="extending/extending-3-controls.html" thumbnail="extending/thumbnail-3.png" title="扩展 Leaflet: Handlers and Controls" description="如何扩展或创建 non-layers。" %}