问题标签 [ngx-leaflet]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
744 浏览

angular - Ngx-leaflet Leaflet,来自 zone.js 的 Angular 5 大量函数调用

我正在使用 ngx-leaflet,在向地图添加标记时,由于大量的函数调用(zone.js),应用程序变慢了。我尝试使用 changeDetection 和 ngZone 但无济于事。请帮忙 :)

在此处输入图像描述

0 投票
1 回答
1260 浏览

angular - ngx-leaflet/Angular 2中带有下拉选择输入的属性绑定映射单击事件

我有一张带有区域多边形的地图。在地图下方,我有一个下拉选择输入,可以动态读取多边形名称作为选项。当用户单击地图上的区域多边形时,我希望下拉选择输入更新为所选多边形名称(在 geojson 文件中作为“名称”字段存在)。

我认为实现这一点的方法是在 HTML 模板文件中使用属性绑定。所以在我的选择类中,我将 value 属性设置为 value clicked,如下所示:

clicked最初在应用程序组件中定义为空字符串。单击多边形时,我在单击事件中设置clicked为多边形名称字段。onEachFeature控制台日志显示clicked变量正在正确更新。但是,选择输入不会按预期更新点击事件。

我怀疑问题是this我的函数内部没有正确更新?如何使用我的地图点击事件更新选择输入?

这是一些代码(基于 Asymmetrik 的 ngx-leaflet-tutorial-ngcli):

Geojson(保存polygons.geojson在 assets 文件夹中:

App.module.ts:

App.component.html:

App.component.ts:

0 投票
2 回答
573 浏览

angular - 基于 Bootstrap 选择输入更新 ngx-leaflet 映射

我有一个应用程序,当您基于此示例在 ngx-leaflet 中单击地图上的多边形时,它会更新 Bootstrap 选择输入下拉菜单。我还希望能够从选择输入中选择一个多边形名称,并具有与单击事件相同的功能——在这种情况下,fitBounds用于平移和缩放到选定的多边形。

我在我的 HTML 模板中添加了事件绑定,该模板会检测下拉菜单中的每个新选择。onChange()我向那个事件传递了一个新函数。但我很难过从这里去哪里。在点击事件中,我可以e.target用来访问所选多边形的边界。但在里面onChange(),我只能访问所选多边形的名称,但实际上我并没有与该多边形相关联的几何图形。那么如何使用下拉选择输入来选择多边形名称并让地图更新与该名称关联的多边形?(请注意,我希望得到灵活的响应,因为我想做的不仅仅是fitBounds()在这个示例之外的实际应用程序中。)

这是我的示例代码:

polygons.geojson(在assets文件夹中)

app.component.html

app.component.ts

0 投票
1 回答
938 浏览

angular5 - angular5 ngx-leaflet如何根据另一个组件的变化刷新wms层

我在我的网页上使用 Angular 5 + ngx-leaflet 来显示带有来自 WMS 服务器的图层数据的地图。

父组件html

父组件.ts

地图组件html:

map.component.ts:

我想要实现的目标:当左栏中的值发生变化时,地图图层中的 WMS URL 将被更新并刷新。

我尝试使用 EventEmitter 将更新的值解析到父组件并调用子地图组件来更新 WMS 图层,但它不起作用。是不是因为方法不对?

谢谢你。

0 投票
1 回答
3778 浏览

leaflet - 如何将缩放控件定位到右下角?

我正在使用 ngx 传单。默认情况下,地图在左上角显示缩放控件。但是我找不到如何改变它的定位。

这是一个过时的方法:

.

资源

使用最新版本的 ngx-leaflet (3.0) 是否有更新的方法来执行此操作?

这是一个屏幕截图,显示控件对象上没有缩放方法: 在此处输入图像描述

0 投票
1 回答
1270 浏览

ngx-leaflet - 如何设置 maxBoundsViscosity 选项?

我想设置平移惯性选项的 maxBoundsViscosity。因为地图元素没有绑定也没有设置功能,所以我不知道该怎么做。有解决方法吗?

0 投票
1 回答
2787 浏览

javascript - 使用 BringToFront() 来设置不在 ngx-leaflet 图层事件中的传单图层样式

我有一个要过滤的多面体,放入独特的图层并设置不同的样式。我加载geoJson,应用一般样式,并onEachFeature根据条件将图层放入featureGroups。仍然在里面onEachFeature,我将样式应用于每个功能组。这工作正常。

问题是多边形笔划重叠,这是传单/svg 中解决的常见问题。我知道用来bringToFront解决这个问题,但我似乎无法让它在我的 ngx-leaflet angular 应用程序中工作。当我bringToFront在点击事件中进行测试时,它可以工作。但我希望将多边形样式本身(没有事件)带到前面。

这是一些示例代码(来自ngx-leaflet-tutorial-ngcli):

states.geojson(在/assets目录中)

app.component.html

app.component.ts

我评论了我所有失败的推redGroup到前面的尝试。如您所见,当您单击多边形时,黄色笔划会被 推到前面bringToFront。但是在我的初始加载中,我希望红色笔划redGroup显示在蓝色笔划的顶部blueGroup。我怎样才能做到这一点?

0 投票
1 回答
176 浏览

ngx-leaflet - 我可以在标记的弹出消息中添加自定义指令或自定义 HTML 代码吗?

我可以使用 ngx-leaflet 将自定义指令或自定义 HTML 代码添加到标记的弹出消息吗?

0 投票
0 回答
1780 浏览

angular - 边界无效

我正在尝试实现一个传单地图,其中缩放级别动态封装了我的 3 个标记。我已经寻找有关此的相关问题,并发现这是最流行的方式:

但是我收到错误“边界无效”。我完全是传单的新手,知道问题是什么吗?

HTML:

组件(我的尝试是在“onMapReady”函数中):

0 投票
1 回答
1156 浏览

angular - ngx-leaflet 不通过服务检测层更改(Angular 6)

我正在运行 Angular 6,我想动态地将一个图层添加到传单地图,但是如果图层是从另一个组件修改的,我无法检测到传单图层的变化。如果从执行图层更改,一切正常, map.component但如果我从外部进行更改,则一切正常:

例子:

map.component.ts

map.component.html

现在一切正常,只要单击按钮,多边形就会出现。但我需要该按钮位于另一个组件 ( form.component.ts) 中,因此我尝试与服务共享该addPolygon()功能:

服务器.service.ts

我修改MapComponent并添加了用于调用服务的构造函数

map.component.ts

form.component.ts

但是,如果我绑定多边形中triggerMap()的按钮,form.component.html则不会将其添加到地图中。addPolygon然而,控制台说map.component.ts已经到达。

我什至尝试使用NgZone,但它没有任何区别。有什么建议吗?

角 CLI:6.0.8