javascript - 如何在 Leaflet.js 中使用 Angular JS

标签 javascript jquery node.js angularjs

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

我正在使用以下方法构建交互式 map 仪表板:

  • Node.JS/Express.js 在后端处理数据
  • Leaflet.js 做 map 可视化
  • 其他库,例如 d3.js。

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

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

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

我很困惑!我的问题是:

  • 我是否应该重新创建应用程序以将 Leaflet 嵌入到 Angular Js 代码中,就像这个例子 link或使用 angular leaflet directive .它读到它还不是一个稳定的库。
  • 在这种情况下使用 Angular.js 是最佳选择吗?

最佳答案

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

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

Plunker Example

我有一个 map Controller 和两个服务。

  1. MapCtrl( map 的 Controller 逻辑)
  2. MapService 将与本地存储通信并保存最后的 View 以获得更好的用户体验
  3. RecordService 将获取您的 ajax 数据以显示在 map 上

那么 Angular 是最佳选择吗?

谁知道呢,不管我多么喜欢使用 angular,我都看不出有什么理由不喜欢。我展示的方式中最困难的事情是无法在弹出窗口中使用 Angular 双向绑定(bind)。虽然这可以通过在不 fork AngularLeaflet 项目的情况下大量自定义 map 来抵消...(也许我太懒了)。

让我知道你的想法?

关于javascript - 如何在 Leaflet.js 中使用 Angular JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22896504/

相关文章:

带有 AngularJS 表的 Javascript 上下文菜单

node.js - 如何使用 "drive.files.get ()"获取下载文件的名称(Drive Api v3、Node JS)?

javascript - 脚本内文本框中使用的日期选择器

javascript - 在构建时创建自定义 Javascript 库

javascript - Native -> WKWebView IFrame 中的 JS 通信

javascript - 表单提交错误允许提交

javascript - 我的 JQuery 函数出了什么问题?

node.js - 如何在typescript下使用kafka-node?

node.js - 托盘的 Electron API更改导致异常

javascript - 我应该如何编写一个可能只运行一次或任意多次的方法,但我希望某些逻辑在调用该方法时只运行一次?