介绍
ember-leaflet-polyline-decorator是一个用于在leaflet地图上绘制带箭头的折线的npm包。它基于ember-leaflet和leaflet-polylinedecorator库，提供了一个易于使用的组件来绘制箭头折线。
安装
安装包：
npm install ember-leaflet-polyline-decorator --save
使用
引入包：
import PolylineDecoratorLayer from 'ember-leaflet-polyline-decorator/components/polyline-decorator-layer';
在模板文件中使用组件：
{{#leaflet-map lat=lat lng=lng zoom=zoom}}
{{#polyline-decorator-layer
locations=locations
options=options}}
{{/polyline-decorator-layer}}
{{/leaflet-map}}其中，lat和lng是默认的经纬度坐标，zoom是默认的缩放级别。locations是一个包含折线坐标点的数组，options是一个可选项对象，用于设置折线的样式、箭头类型和方向等。
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------------- ---- -----------------------------------------------------------------------
----- - -------- - - ------
------ ------- -------------------------
---- -------
---- --------
----- ---
---------- ------------------- -
------ --------------- ------------- ---------------
---
---------- ------------------- -
------ -
---------- ---
------------ -
------- -----
------ -------
------- -
-
--
---
-------- ------------------- -
------ -
--------- -
-
------- ------
-------- --
------- -----------------------------------------
-
--
------ -------
------- -
--
--
---参数说明
locations：折线的坐标点数组，如[[51.51,-0.12],[51.5,-0.11],[51.49,-0.13]]
options：可选项，用于设置折线的样式、箭头类型和方向等。默认值为：
-- -------------------- ---- -------
-
--------- -
-
------- ------
-------- --
------- --------------------
---------- ---
------------ -
------- -----
------ -------
------- -
-
--
-
--
------ -------
------- -
-其中patterns数组中的每一项都是一个对象，包含如下属性：
offset：在折线上的位置，可以是百分数或像素值，默认为50%repeats：重复箭头的数量，0表示不重复，正整数表示箭头的数量symbol：箭头的样式，使用L.Symbol.arrowHead()函数生成
arrowHead：可选项，在options中用于设置箭头的样式和方向。默认值为：
{
headAngle: 90,
pathOptions: {
stroke: true,
color: '#000',
weight: 2
}
}其中headAngle表示箭头的夹角，pathOptions用于设置箭头的样式。
性能优化
使用polyline-decorator-layer组件时，由于箭头的数目较多，可能会影响地图的性能。为了避免此问题，可以通过以下方式进行性能优化：
- 尽量减少箭头的数量
- 只在必要时才显示箭头
- 使用
animatedMarker来替代箭头，以减少DOM节点的数量
结论
ember-leaflet-polyline-decorator是一个非常有用的npm包，可以为你的地图应用增添一些亮点。使用此包，你将可以轻松地在地图上绘制带箭头的折线，并通过简单的配置来调整折线的样式和箭头的方向。同时，注意到该包在使用大量箭头时可能会影响地图性能，因此我们需要在使用时进行一些优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672683660cf7123b36654