前言
leaflet-shape-markers 是一个基于 Leaflet 的 npm 包，可用于在地图上添加形状标记（shape markers）。这篇文章将介绍如何使用 leaflet-shape-markers 创建地图，并在地图上添加形状标记。
安装
首先，我们需要确保已经安装了 Leaflet。然后，在命令行中执行以下命令来安装 leaflet-shape-markers：
npm install leaflet-shape-markers --save
简介
leaflet-shape-markers 提供了一个 ShapeMarker 类，该类继承自 L.Marker 类，并支持添加各种形状的标记，包括圆形、三角形、矩形等。
创建地图
在使用 leaflet-shape-markers 之前，我们需要先创建一个 Leaflet 地图。下面是一个简单的例子：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------ ---------------
----- --------------- --
----- --------------- ---------------------------- -------------------
----- ---------------- ------------------------------------------------- --
------- ---------------------------------------------------------
-------
------
---- -------- ------------- ----- ------- --------------
--------
--- --- - ----------------------------- ------- ----
----------------------------------------------------------------- -
------------ ---- ---- ------ -- ------------------------------------------------------- ------------- - -
--- -------------------------------------------------------------------- - -
-------- - -- -------------------------------------------
-------- ---
--------------
---------
-------
-------上面的代码创建了一个 div 元素作为地图容器，然后通过 Leaflet 的 L.map 函数创建了一个地图实例，并将其添加到了 div 元素中。
在这个例子中，我们使用了 Mapbox 提供的地图瓦片服务。你可以在这里查看更多有关地图瓦片服务的信息：https://leafletjs.com/reference-1.7.1.html#tilelayer
添加形状标记
接下来，我们将在地图上添加一个圆形标记。首先，我们需要在 HTML 文件中引入 leaflet-shape-markers 的 CSS 和 JavaScript 文件：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------ ---------------
----- --------------- --
----- --------------- ---------------------------- -------------------
----- ---------------- ------------------------------------------------- --
----- ---------------- ----------------------------------------------------------------------------- --
------- ---------------------------------------------------------
------- -------------------------------------------------------------------------------------
-------
------
---- -------- ------------- ----- ------- --------------
--------
--- --- - ----------------------------- ------- ----
----------------------------------------------------------------- -
------------ ---- ---- ------ -- ------------------------------------------------------- ------------- - -
--- -------------------------------------------------------------------- - -
-------- - -- -------------------------------------------
-------- ---
--------------
--- ------ - -------------------- ------- -
------ ---------
------- ---
------ ------
---------- -------
------------ ----
--------------
---------
-------
-------上面的代码创建了一个圆形标记，并将其添加到地图中。shape 参数指定了标记的形状，radius 参数指定了圆形标记的半径，color 参数指定了标记边框的颜色，fillColor 参数指定了标记填充色的颜色，fillOpacity 参数指定了标记填充色的不透明度。
除了圆形标记，还可以使用多边形、三角形、矩形等形状的标记。不同类型的标记具有不同的参数，请查阅 leaflet-shape-markers 的文档以获取更多详细信息。
总结
本文介绍了如何使用 leaflet-shape-markers 在 Leaflet 地图上添加形状标记。在实际开发中，你可以使用不同的形状标记，创建出更加丰富多彩的地图。如果你想了解更多有关 Leaflet 的知识，请参考 Leaflet 的官方文档：https://leafletjs.com/reference-1.7.1.html
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca6fb5cbfe1ea0612401