问题标签 [ngx-leaflet]

我正在使用带有 ngx-leaflet 包的 Angular 和 Leaflet，但我无法让我的地图占据页面的整个高度和宽度。当我定义一个固定的高度和宽度时效果很好，但当我将它们更改为 100vh 时，它会出现垂直滚动条。

包含地图的 div：

全局应用的样式：

应用于地图的样式：

这是该应用程序的屏幕截图：

I am trying to display a set of rectangles on a map. I am able to draw all of them using:

However, when I hover over the rectangles, the tooltip is shown only for the outer-most rectangle. Also, in click event, only the outer-most rectangle is selected. (Note that larger rectangles can be layered over smaller ones)

Given this situation - how do I show the tooltip correctly and retreive the proper layer on click event?

Stackblitz : click here

请注意，我正在为 Angular 使用 @asymmetrik/ngx-leaflet-draw。我正在配置一个地图，用户可以在其中绘制矩形或多边形。然后我将这些保存到基于 onDrawCreated 事件的 layerGroup 中，这是完美的。

我还打算根据 onDrawDeleted 事件删除图层，但这由于某种原因不起作用。我最终在应用程序中做的是保存数据并将其转换为 GeoJSON。然后将其显示在控制台中以进行故障排除。

组件 HTML：

部分地图和传单绘制组件：

根据文档和其他类似问题，上面的代码应该可以工作。但我想我错过了一些简单的东西。

我正在开发一个大型 Angular 8 应用程序，该应用程序有许多使用传单的组件。现有组件直接使用传单和一些插件，导入如下：

这一直在工作。

ngx-leaflet随着我们构建新组件并重构现有组件，我想逐步介绍，但这会造成麻烦。我按照文档创建了一个简单的地图组件，它似乎工作正常。但是，现有组件现在无法正确呈现。使用 markercluster 错误的组件 TypeError: L.MarkerClusterGroup is not a constructor。组件尝试使用的L对象似乎已使用 markercluster 功能正确扩展，但在调用堆栈下方我看到

，我怀疑这源于与ngx-leaflet.

我没有看到任何示例或文档试图做我所描述的事情 - 是否预计在ngx-leaflet指令之外使用的传单会出现这样的问题，或者我是否应该能够将库与我所使用的组件隔离开来打算用在？

相关代码：https ://stackblitz.com/edit/angular-ngx-leaflet-tests-kz7kc7 当您单击标记时，模态打开但里面的选项卡不起作用。角度变化检测存在一些问题。如果我手动检测更改，它会起作用。如何打开模态以便它“保持连接”到角度的变化检测？

我目前正在使用具有以下版本的 asymmetrik 的 ngx-leaflet 和 ngx-leaflet-markercluster ：

在开发过程中一切都很好。但是，当我为生产 ( ng serve --prod) 构建 angular 项目时，我无法看到集群标记，并且在 Chrome 的控制台中出现以下错误：

我在我的组件中导入“leaflet”和“leaflet.markercluster”。下面是map.component.ts代码：

这是map.component.html代码：

您可以在此处找到主要代码。

有任何想法吗？

我们已经在我们的一个网站上使用 Leaflet，但现在我们正在迁移到 Angular。现在我们正在尝试使用 Ngx-Leaflet 来重现它。

但是我们没有国界...

我们现在拥有的：

在 component.html

在 ngOnInit() 的 component.ts 中

GeoJson 就像

我很难找到如何转换一些代码例如

如果有人可以支持我或共享具有此类功能的代码，我将不胜感激。

我目前正在使用 Angular @HostListener来获取视口的当前宽度，onResize()如下所示：

但我还需要一种方法来设置组件的 this.width onLoad()（在构造函数中或至少在ngOnInit()生命周期中）。

我没有找到使用 HostListener 执行此操作的方法。是否有一个很好的选择来获取视口的当前宽度（在调整大小和加载时）并对其做出反应？

我的目标是在移动视口大小上设置Leaflet-PopUp的 maxWidth。

我在我的 Angular 应用程序中使用原始的 leaflet.js，它依赖于一些传单插件，如 EasyButton、Geoman、Distortable Image。ngx-leaflet 看起来很酷很简单。所以我决定迁移到 ngx-leaflet。但我确定是否可以将这些插件与库集成。如果是这样，请提供一些指导。

当我单击传单圆圈时，我想打开一个 Angular Material 对话框。对话框出现，但行为奇怪。当我使用普通按钮（单击）事件打开对话框时，不会出现这种奇怪的行为。

我尝试像这样调用函数。我将 onClickCircles 函数绑定到我的圈子。

当按下圆圈时，我打开对话框

当从其他任何地方调用 onClickCircle(e) 时，它工作正常。我猜是因为 .bind(this) 再次实例化了我的组件，并且它必须在对话框出现正确之前加载整个组件。但我不确定这一点，也不知道是否有解决方法。