LeafletJS介绍

概述

LeafletJS是一个轻量级的开源JavaScript地图库，可以用于构建基于互联网的交互式地图应用。LeafletJS让开发者可以在Web中，使用统一的接口来处理各种不同的地图提供商，比如OpenStreetMap、Bing地图、Esri、Google等。同时，LeafletJS也提供了很多交互式地图的功能，比如缩放、平移、标记、图形等。

特点

LeafletJS的特点包括：

• 轻量级：代码文件大小只有37KB，兼容性好。
• 易用性：开发者可以通过简单的命令来使用所有功能。
• 多平台支持：支持跨平台，包括桌面和移动设备。
• 支持扩展：LeafletJS可以扩展，开发者可以自定义自己的插件或者可以使用现成的插件。
• 支持地图瓦片：LeafletJS可以支持各种地图瓦片（比如OpenStreetMap、Google地图、Bing地图等）。

用法

引入LeafletJS

要使用LeafletJS，首先需要先将引入相应的JS和CSS文件。

<!-- 引入LeafletJS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.3.4/leaflet.css" />
<script src="https://cdn.jsdelivr.net/leaflet/1.3.4/leaflet.js"></script>

创建地图

创建一个简单的地图很容易：

// 创建地图
var map = L.map('map').setView([55.76, 37.64], 10);

上面的代码创建了一个地图，并将地图的视图设置为[55.76, 37.64]，缩放级别为10。

添加地图瓦片

LeafletJS提供了很多地图瓦片的源，开发者可以根据需要选择。

// 添加地图瓦片
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

上述代码添加了OpenStreetMap的瓦片图层到地图中。

添加标记

开发者可以在地图上添加标记点。下面的代码在地图上添加了两个标记点。

// 添加标记点
var marker = L.marker([55.76, 37.64]).addTo(map);
marker.bindPopup("PopUp Content");
var marker2 = L.marker([55.74, 37.60]).addTo(map);
marker2.bindPopup("PopUp Content 2");

添加多边形

开发者可以在地图上添加多边形。

// 添加多边形
var polygon = L.polygon([
        [55.75, 37.61],
        [55.77, 37.61],
        [55.77, 37.63],
        [55.75, 37.63]
    ]).addTo(map);
polygon.bindPopup("Polygon PopUp Content");

总结

LeafletJS是一个轻量级、易用、可扩展的地图库，通过LeafletJS，开发者可以快速构建自己的基于互联网的交互式地图应用。