在矩形图上绘制传单它抛出错误

Question

我在一个角度应用程序中使用leaflet + leaflet-draw + @ngx-leaflet + @ngx-leaflet-draw。

我尝试过everything，版本更改，导入模块.forRoot()而不是，在angular.json文件中添加js文件，删除node_modules，重新安装它们，遵循@ngx-传单-从零开始绘制指南100次。

无论我做什么，当我试图绘制一个矩形时，它总是抛出以下错误：

​

​

尽管处理程序是存在的，并且是，但它们的所有除了矩形处理程序(我唯一需要的)外，都工作得很完美。

​

​

我甚至不知道如何向你提供更具体的信息--如果不是这样的话：

• 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不是平局选项。正确的选项是rectangle。此外，默认情况下，所有处理程序都已启用。所以，你只需要关掉你不想要的。

因此，我认为您想要的是您的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.json文件中由角CLI导出的资产列表中。

识别和修正错误

传单绘制的构建有一些奇怪的地方，导致原始地图无法工作。为了让它们正常工作，我必须直接导入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:禁用严格模式

另一种解决方案是禁用类型记录编译器的严格模式。

为此，编辑tsconfig.json和tsconfig.app.json文件，在compilerOptions属性下添加"noImplicitUseStrict": true。

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

Answer 2

在传单绘图文件中有一个输入问题。

不幸的是，这个项目没有更多的支持。

您可以更新节点包模块并修复问题，以下是我的解决方案：

安装最后一页单张及单张版

对我来说：

    "leaflet": "^1.7.1",
    "leaflet-draw": "^1.0.4",

并安装修补程序包：https://www.npmjs.com/package/patch-package

转到节点-模块/传单-绘图/dist/folet.drak. go

更新包

替换代码的这一部分：(我不能给您行，因为它是一个缩小的文件，所以您必须ctrl+f来查找位置。)

{var a,n,o=L.Util.extend({},t,o)

通过这一点：

{var type;var a,n,o=L.Util.extend({},t,o)

更新节点模块包后，必须创建节点模块修补程序。

为此，请使用修补程序包命令：

npx patch-package leaflet-draw

最后一件事是告诉角，以替换正确的传单绘制文件。

要做到这一点，您必须进入角度package.json并添加以下一行：

“后期安装”：“修补程序包”

就像这样：

  "scripts": {
    "postinstall": "patch-package",
    "build": "ng build",
    "lint": "ng lint",
    "ng": "ng",
  },

删除节点模块包

新安装(npm安装)

现在可以使用矩形绘制fnunctionnality

如果您只需要在本地，您只需要更新传单- file. if文件。

Answer 3

我用“修好”了

rectangle: <any>{ showArea: false },