如何将 Angular JS 与 Leaflet.js 一起使用

Posted 2023-03-07

【中文标题】如何将 Angular JS 与 Leaflet.js 一起使用

【英文标题】：How to use Angular JS with Leaflet.js

【发布时间】：2014-05-18 18:09:38

【问题描述】：

我正在使用 Node.JS/Leaflet.js 开发仪表板。几周前我开始学习 Angular js。但我在我的项目中处于中等阶段。

我正在使用以下工具构建交互式地图仪表板：

Node.JS/Express.js 在后端处理数据 Leaflet.js 做地图可视化 d3.js 等其他库。

现在，我正在尝试将小部件添加到我的仪表板，在其中单击点并使用 Node.js 从数据库中获取与每个点相关的信息。

我想简化我的问题并考虑这个例子。 http:jsfiddle.net/8QHFe/128/

当我将鼠标悬停在形状上时，我会得到一个与地图上每个多边形/点相关的图表。

我很困惑！我的问题是：

我是否应该重新创建应用程序以将 Leaflet 嵌入到 Angular Js 代码中，例如此示例 link 或使用 angular leaflet directive。它读到它还不是一个稳定的库。 在这种情况下使用 Angular.js 是不是最好的选择？

【参考方案1】：

所以这是一个很好的问题。我经常很难理解如何将映射包实现到 Angular 中。 The Plunker below 展示了一种方法，但我不确定它是否是“Angular Way”。我很想听听其他人的意见。

在我上一个地图应用程序中，我没有使用AngularLeaflet，因为我有太多的自定义要做。 （例如，根据某些变量打开和关闭 WMS 图层、在缩放级别上交换底图、使用 ESRI 图层等）。也就是说，它看起来是一个很棒的项目，我期待着使用它。

Plunker Example

我有一个地图控制器和两个服务。

MapCtrl（地图的控制器逻辑） MapService 将与本地存储通信并保存最后一个视图以获得更好的用户体验 RecordService 将使您的 ajax 数据显示在地图上

那么 Angular 是最佳选择吗？

谁知道呢，不管我多么喜欢使用 Angular，我也看不出任何理由。关于我展示的方式最困难的事情是无法在弹出窗口中使用 angular 2-way binding。虽然这可以通过在不分叉 AngularLeaflet 项目的情况下大量自定义地图来抵消......（也许我只是太懒了）。

让我知道你的想法？

【讨论】：

非常感谢您的出色回答。我真的很困惑，我不知道使用AngularLeaflet是否是最好的选择，它简化了工作，但我害怕受到库的能力的限制。我期待听到其他有经验的人的意见。

@Cory 您的 Plunker 示例已被多次编辑，当前版本不再有效。你指的是哪个版本？

我恢复到我回答问题时的状态。由于 API 密钥无效，它仍然无法工作；虽然它有效。我所做的指令版本是at this forked plunker