介绍
Facilmap 是一款基于 Leaflet 的地图应用开发框架，facilmap-frontend 则是其专门为前端开发者设计的 npm 包。使用 facilmap-frontend 可以轻松地进行地图的加载、样式自定义、交互操作等操作，并且无需自己从头开始构建地图应用。
安装
facilmap-frontend 是一个 npm 包，因此你可以通过 npm 安装它，命令如下：
npm install facilmap-frontend
安装完成后，你可以在自己的项目中引入 facilmap-frontend：
import 'facilmap-frontend';
使用
页面结构
使用 facilmap-frontend 前，需要预先确定页面的结构。例如下图所示的一个基本地图结构：
<div id="map"></div>
#map {
height: 500px;
}初始化地图
在页面结构确定后，我们可以开始初始化地图：
const map = L.map('map').setView([51.505, -0.09], 13);上面的代码创建了一个 id 为 map 的 div 元素，并将地图视图(center 视图)设置为经纬度坐标 (51.505, -0.09) 并缩放级别设置为 13。
加载 OpenStreetMap
加载 OpenStreetMap 需要使用到 Leaflet 的 tileLayer，代码如下：
const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);自定义地图样式
默认情况下，图层会按照默认样式显示在地图上。我们可以通过使用 tileLayer options 来自定义图层样式：
const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
tileOpacity: 0.5,
}).addTo(map);上面的代码中，我们自定义了图层的最大缩放级别、版权信息，以及图层透明度。
交互操作
facilmap-frontend 还支持各种交互操作，例如：添加 Markers (标记）、框选、测距等。这里以添加标记为例，代码如下：
const marker = L.marker([51.5, -0.09]).addTo(map);
完整示例
将上面的所有代码整合到一起，即可得到一个完整的地图应用示例：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
----- ---------------- ------------------------------------------------------------------------
-------
---- -
------- ------
-
--------
-------
------
---- ---------------
------- -------------------------------------------------------------------------------
------- ---------------------------------------------------
--------
----- --- - ----------------------------- ------- ----
----- --------- - ----------------------------------------------------------------- -
-------- ---
------------ ---- ---- - -- ------------------------------------------------------- --------------
------------ ----
--------------
----- ------ - --------------- -------------------
---------
-------
-------结论
通过 facilmap-frontend，我们可以轻松快速的构建地图应用，从而在前端开发中快速实现地图相关功能，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739881e8991b448e98a2