LeafletJS教程

LeafletJS是一个开源的JavaScript库，用于创建交互式地图，支持在网络，移动设备和桌面端运行。本教程将涵盖从入门到进阶的内容。

简介

LeafletJS不仅可以创建地图，还可以添加多个图层和覆盖物，使得地图更加丰富多彩。它是目前最受欢迎的JavaScript地图库之一，也是一个轻量级的库，代码压缩后只有38KB，而且易于上手。

安装

最简单的方法是使用CDN：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

或者，您可以下载最新版本的LeafletJS，然后将其引入您的网页中：

<link rel="stylesheet" href="../dist/leaflet.css" />
<script src="../dist/leaflet.js"></script>

基本使用

首先创建一个地图容器：

<div id="mapid"></div>

然后，实例化一个地图对象：

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

以上代码创建了一个 id 为 mapid 的地图容器对象，并将缩放级别设置为13。可以使用 setView() 方法来设置地图的中心点坐标。在本例中，地图的中心点坐标为 [51.505, -0.09]。

接着，添加一个TileLayer对象来渲染地图图像：

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'OpenStreetMap'
}).addTo(mymap);

以上代码将 OpenStreetMap作为地图图像的源，并添加到地图对象上。

图层

除了TileLayer之外，您还可以添加多个图层和覆盖物。例如，以下代码将一个GeoJSON图层添加到地图上：

L.geoJSON(data).addTo(mymap);

这个 data 对象是一个包含GeoJSON数据的对象。您可以通过调用不同的方法来自定义GeoJSON图层的样式和行为，比如可以使用颜色和线条粗细来设置线段的外观。

更多功能

LeafletJS提供了许多其他的功能和方法，用于创建各种类型的地图，并添加交互和动态行为。您可以在 LeafletJS 的官方文档中找到更详尽的介绍和例子。欢迎体验LeafletJS！