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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22896504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 23:58:46  来源:igfitidea点击:

How to use Angular JS with Leaflet.js

javascriptjquerynode.jsangularjs

提问by user3378649

I am working on a dashboard using Node.JS/Leaflet.js. I started learning Angular js a few weeks ago. But I am at a medium step in my project.

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

I am building an interactive map dashboard using:

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

  • Node.JS/Express.js to process data on the backend
  • Leaflet.js to do map visualization
  • other libraries like d3.js.
  • Node.JS/Express.js 在后端处理数据
  • Leaflet.js 做地图可视化
  • 其他库,如 d3.js。

Now, I am trying to add widgets to my dashboard, where I click on points and fetch information related to each point from DB using Node.js.

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

I'd like to simplify my problem and consider this example. http:jsfiddle.net/8QHFe/128/

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

When I hover my mouse on the shape, I get a chart related to every polygon/point on the map.

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

I am confused! My question is:

我很迷惑!我的问题是:

  • Should I re-create the app to embed Leaflet into Angular Js code, like this example linkor use angular leaflet directive. It read that it is not a stable library yet.
  • Is it the best choice to use Angular.js in such scenarios?
  • 我应该重新创建应用程序以将 Leaflet 嵌入到 Angular Js 代码中,就像这个示例链接或使用 angularLeaflet指令。它读到它不是一个稳定的库。
  • 在这种情况下使用 Angular.js 是不是最好的选择?

回答by Cory Silva

So this is a great question. I often struggle understanding how to implement mapping packages into Angular. The Plunker belowshows one way of doing it, but I am not sure it is the "Angular Way". I would love to hear other people weigh in.

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

In my last mapping application I did not use AngularLeafletbecause I had too many customization to do. (For example turn WMS layers on and off depending upon some variables, swap basemaps on zoom levels, use ESRI layers, etc). That said it looks like a great project and I look forward to using it.

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

Plunker Example

Plunker 示例

I have one controller for the map and two services.

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

  1. MapCtrl (Controller logic for the map)
  2. MapService will talk to local storage and save the last view for a better UX
  3. RecordService will get your ajax data to show on the map
  1. MapCtrl(地图的控制器逻辑)
  2. MapService 将与本地存储通信并保存最后一个视图以获得更好的用户体验
  3. RecordService 将获取您的 ajax 数据以显示在地图上

So is Angular the best choice?

那么 Angular 是最好的选择吗?

Who knows, regardless I enjoy using angular so much I cannot see any reason not too. The toughest thing about the way I show is not being able to use angular 2-way binding in the popups. Though that is countered by being able to heavily customize the map without forking the AngularLeaflet project... (maybe I am just too lazy).

谁知道呢,不管我多么喜欢使用 angular,我也看不出任何理由。我展示的方式最困难的事情是无法在弹出窗口中使用 angular 2-way binding。尽管能够在不分叉 AngularLeaflet 项目的情况下对地图进行大量自定义来抵消这一点......(也许我只是太懒了)。

Let me know what you think?

让我知道你的想法?