在Web应用程序中，地图功能已经成为了很重要的一部分，特别是在交通工具方向上，我们需要实时展示车辆到站的时间，以及交通线路的规划，而@transitland/ember-leaflet-polyline-decorator这个npm包可以较好的完成这个任务，本文将详细介绍它的安装和使用。
安装
使用 npm 进行安装：
npm install --save @transitland/ember-leaflet-polyline-decorator
使用
在你的 Ember 应用程序中，你需要使用组件 "polyline-decorator"：
-- -------------------- ---- -------
------ ----------------- ---- ------------------------------------------------------------------------------
------ ------- ----- ------------- ------- --------- -
----------- - -
--------- ----------
--------- ---------
-------- ----------
--------- ---------
--
------- - -
----- -----------------------------------------------------------------------------------
------- ---------
------ ---
------- --
--
------- - -
--------- ---------------
------- --
--
------------- -
--------------------
-
-在你的应用程序的模板中，你将使用em-leaflet以及新的"{{polyline-decorator}}"组件：
-- -------------------- ---- -------
--------------
-------
-------
---------
---------------
-- --------
--
------------- ------------------------
--------------------
-----------------------
---------------
--
----------------在这里，模板中的"coordinates"属性是一个必需的属性，因为它在地图中绘制出多条折线路径。而"options"属性是可选属性，但是我们可以在这里实现更丰富地图功能，例如定义"linePattern"属性来设置线路的样式。
除了其中的属性以外，"polyline-decorator"组件中还有其他可选项来更好地配置地图：
- "patterns" 可以设置线路的样式;
- "factor" 可以设置线路重复的次数。
示例代码
下面是一个带有 "polyline-decorator" 的示例：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - ------ - ---- ----------------
------ - ---- - ---- -------------------------
------ ----------------- ---- ------------------------------------------------------------------------------
------ ------- ----- ------------ ------- --------- -
--- - --------
--- - --------
---- - ---
----------- - -
-------- -------
-------- -------
------- --------
-------- -------
--
------- - -
----- ---------------------------------------------------------------------------------------------------------------------------
------- ---------
------ ---
------- --
--
------- - -
--------- ---------------
------- --
--
-------
---------------- -
-------------------------- --------
-
-
-- -------------------- ---- -------
--------------
-------
-------
---------
---------------
-- --------
--
------------- ------------------------
--------------------
-----------------------
---------------
--
----------------结论
在本文中，我们介绍了如何使用npm包@transitland/ember-leaflet-polyline-decorator来实现地图中的多条线路展示，同时也展示了如何改变线路的样式以及重复次数等。这个npm包能够很好的适应我们在交通工具方面的方向需求，并且通过Ember framework的支持，也能够很方便的嵌入到我们的Web应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d6a81e8991b448db2e1