如何在Leaflet.js中使用Angular JS

use*_*649 7 javascript jquery node.js angularjs

我正在使用Node.JS/Leaflet.js在仪表板上工作.几个星期前我开始学习Angular js.但我在项目中迈出了一步.

我正在构建一个交互式地图仪表板,使用:

  • Node.JS/Express.js用于处理后端的数据
  • Leaflet.js做地图可视化
  • 其他图书馆,如d3.js.

现在,我正在尝试向我的仪表板添加小部件,我点击这些点并使用Node.js从DB获取与每个点相关的信息.

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

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

我很迷惑!我的问题是:

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

Cor*_*lva 15

所以这是一个很好的问题.我经常很难理解如何将映射包实现到Angular中. 下面的Plunker显示了一种方法,但我不确定它是"Angular Way".我很想听到其他人的声音.

在我的上一个映射应用程序中,我没有使用AngularLeaflet,因为我有太多的自定义要做.(例如,根据某些变量打开和关闭WMS图层,在缩放级别上交换底图,使用ESRI图层等).这说它看起来像一个伟大的项目,我期待着使用它.

Plunker示例

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

  1. MapCtrl(地图的控制器逻辑)
  2. MapService将与本地存储通信并保存最后一个视图以获得更好的UX
  3. RecordService将获取您在地图上显示的ajax数据

那么Angular是最好的选择吗?

谁知道,无论我喜欢使用角度如此之多,我都看不出任何理由.我展示的最难的方法是不能在弹出窗口中使用角度双向绑定.虽然这可以通过能够在不分支AngularLeaflet项目的情况下大量定制地图来抵消......(也许我只是太懒了).

让我知道你的想法?

  • 非常感谢您的回答.这对我来说真的很困惑,我不知道它是否是使用AngularLeaflet的最佳选择,它简化了工作,但我害怕被图书馆的能力所限制.我希望听到其他有经验的人的意见. (2认同)