Leaflet快速入门教程

下面将介绍leaflet.js的基础入门，包含利用leaflet建立基础地图，添加标记(markers)、折线(polylines)、弹出窗口(弹出窗口)和处理事件(dealing with events)。

初始化页面

• 引入leaflet.css

<link rel="stylesheet" href="../source/leaflet.css">

• 引入leaflet.js

<script src="../source/leaflet.js"></script>

• 在html中声明div作为地图容器

<div id="map"></div>

• 设置地图容器的样式

#map {
    width: 100vw;
    height: 100vh;
}

设置地图

• 初始化地图并设置中心点坐标和缩放级别

const map = L.map('map').setView([39.5424, 116.2351], 13);

• 添加底图图层，以天地图为例子

// 声明图层
const tdt_layer = L.tileLayer('https://t6.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=申请的天地图token', {
    maxZoom: 19
});
// 加入底图
tdt_layer.addTo(map);

添加几何图形(以标记、圆和多边形为例)

• marker(标记)

const marker = L.marker([39.9042, 116.4074]).addTo(map);

• circle(圆)

const circle = L.circle([39.9042, 116.4074], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map);

• polyline(多边形)

const polygon = L.polygon([
    [39.9042, 116.4084],
    [39.9049, 116.4098],
    [39.9112, 116.4100]
]).addTo(map);

弹出窗口

1. 挂载到几何图形

marker.bindPopup("<b>Hello world!</b><br>I am a popup.");
// 加载时即打开
circle.bindPopup("这是一个圆").openPopup();

2. 以单独的图层存在

const popup = L.popup()
    .setLatLng([39.9112, 116.4120])
    .setContent("这是一段内容")
    .openOn(map);

处理事件

每当 Leaflet 中发生某些事情时，例如用户单击标记或地图缩放更改，相应的对象都会发送一个事件，你可以通过map去捕捉到事件，然后触发相应的函数。

// 1. 监听地图的点击事件并在触发时调用相关的函数
 map.on('click', onMapClick);
let popup1 = L.popup();
function onMapClick(e) {
    popup1
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
}