介绍
Ember-leaflet-draw 是一个集成了 Leaflet 和 Ember.js 的地图编辑 npm 包，它允许用户在地图上绘制、编辑和删除多种几何图形，例如点、线和面。同时，它还提供了一个适用于 Ember.js 应用程序的可重用组件集合。
安装
首先，需要安装 Ember.js：
ember new my-app
接下来，安装 ember-leaflet 和 ember-leaflet-draw：
ember install ember-leaflet ember install ember-leaflet-draw
使用
组件
在模板中插入组件：
{{#leaflet-map lat=lat lng=lng zoom=zoom}}
{{draw-control}}
{{/leaflet-map}}API
leaflet-draw
该组件提供了一个类似于 Leaflet.Control.Draw 的 API，允许您在地图上绘制和编辑几何图形。它在内部使用 Leaflet.Draw 库，因此您可以在文档中查找有关额外配置和 API 的信息。下面是几个示例：
- 绘制一个点：
-- -------------------- ---- -------
--- --- - ----------------
--- ------------ - -----------------------
--- ---- - ------------------------
------------------- -
----------- -----
------------- -
------ ---------
--
----- --------
-------- -------------------------
--------- ---- ----
----------- ---- ----
------------ --- -----
-------------- ---- ----
--
------------- 监听一个事件：
let draw = this.get('drawControl');
draw.on(L.Draw.Event.CREATED, (e) => {
let type = e.layerType;
let layer = e.layer;
console.log(type, layer);
});插件
该组件还支持启用 Leaflet 插件来增强用户体验。下面是几个可用的插件：
- leaflet-draw-drag：
-- -------------------- ---- -------
--- ---- - ------------------------
--- ---- - --- ------------
----------------
---------------------- - -
---------- ------------------------------ -- -----------------------
------- -----
- - --
--
-----------------
----- -----------
-------------- --- -----------
------- -- -- -
--------------
-
---- leaflet-draw-indoor：
-- -------------------- ---- -------
--- ------ - --- ---------
---------------
--
--- ------- - -------------------
--------------------- -
--------- --------------
---------- ----
--
------------- -
---
-------------------------------
--- ---- - ------------------------
------------------ -- -- -
------------------
---
------------------- -- -- -
-----------------
---总结
Ember-leaflet-draw 是一个非常强大的 npm 包，可以方便地进行地图编辑操作。对于需要在其应用程序中使用地图编辑工具的开发人员而言，它是一个高度可配置和可扩展的已有解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1281e8991b448e6cfa