传单在矩形绘制上绘制会引发错误

Question

我正在使用leaflet + leaflet-draw + @ngx-leaflet + @ngx-leaflet-draw在 Angular 应用程序中。

我已经尝试了一切，版本发生变化，导入模块.forRoot()而不是，在我的 angular.json 中添加 js 文件文件，删除 node_modules，重新安装它们，从头开始遵循 @ngx-leaflet-draw 上的指南一百次。

无论我做什么，当我尝试绘制矩形时，它总是会抛出此错误:

即使处理程序存在，并且除了矩形处理程序(我唯一需要的)之外，它们所有都可以完美工作

如果不是这样，我什至不知道如何向您提供更具体的信息:

• leaflet :1.5.1
• leaflet-draw :1.0.4
• @asymmetrik/ngx-leaflet :6.0.1
• @asymmetrik/ngx-leaflet-draw :5.0.1

我陷入了这个愚蠢的错误，我不知道如何克服它。请帮忙!

这是一个演示存储库:https://github.com/caiusCitiriga/leaflet-rect-drawer

Answer 1

有几个问题:

1. 抽签选项不太正确。但这实际上并没有导致错误。
2. 传单绘制错误会导致您看到异常。

传单绘制选项

square 不是绘图选项。正确的选项是矩形。此外，默认情况下会启用所有处理程序。因此，您只需关闭那些您不需要的即可。

所以，我认为您想要的内容在您的 app.component.ts 文件中:

public drawOptions = {
        position: 'topright',
        draw: {
            marker: {
                icon: L.icon({
                    iconSize: [25, 41],
                    iconAnchor: [13, 41],
                    iconUrl: 'assets/marker-icon.png',
                    shadowUrl: 'assets/marker-shadow.png'
                })
            },
            polygon: false,
            circlemarker: false
        }
    };

以上内容将确保启用标记、圆形、矩形和折线，并禁用其他标记。您需要确保将传单资源 png 文件添加到 Angular CLI 在 angular.json 文件中导出的资源列表中。

识别并修复错误

传单绘制的构建有些奇怪，导致源映射无法工作。为了让它们工作，我必须直接导入 leaflet.draw-src.js 文件。

在 app.component.ts 的顶部，我添加了:

import * as L from 'leaflet';
import '../../node_modules/leaflet-draw/dist/leaflet.draw-src.js'; // add this

这允许您在传单绘制代码中放置一个断点来弄清楚发生了什么。执行此操作后，看起来有一个名为 type 的变量在分配之前未声明。代码正在严格模式下运行，因此这将引发异常。这看起来是传单绘制中的一个错误。

解决方案1:禁用ShowArea

首先，您可以禁用showArea，这将阻止有问题的代码运行。为此，请修改 drawOptions:

public drawOptions = {
        position: 'topright',
        draw: {
            marker: {
                icon: L.icon({
                    iconSize: [25, 41],
                    iconAnchor: [13, 41],
                    iconUrl: 'assets/marker-icon.png',
                    shadowUrl: 'assets/marker-shadow.png'
                })
            },
            rectangle: { showArea: false }, // disable showArea
            polyline: true,
            polygon: false,
            circlemarker: false
        }
    };

这不是一个很好的解决方案，因为您会失去 showArea 功能。

解决方案 2:禁用严格模式

另一个解决方案是禁用 Typescript 编译器的严格模式。

为此，请编辑 tsconfig.json 和 tsconfig.app.json 文件，在 compilerOptions属性。

这解决了问题，但现在您没有在严格模式下运行代码，这可能会导致其他问题。