Leaflet Draw on rectangle draw 它抛出错误

Question

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

我已经尝试了一切，版本改变，导入模块.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

有几个问题：

绘图选项不太正确。不过，这实际上并不是导致错误的原因。
有一个错误 leaflet-draw 会导致您看到的异常。

传单绘制选项

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 CLI 在您的 angular.json 文件中导出的资产列表中。

识别并修复错误

leaflet-draw 的构建有些奇怪，导致源映射无法工作。为了让它们工作，我必须直接导入 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 的变量在分配给之前未声明。代码在严格模式下运行，因此这将引发异常。这看起来是 leaflet-draw 中的错误。

解决方案 1：禁用 ShowArea

首先，您可以禁用showArea，这将阻止问题代码运行ning。为此，修改 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 属性.

下添加 "noImplicitUseStrict": true

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

Answer 2

传单绘图文件中存在打字问题

很遗憾，此项目不再有支持

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

安装最后一个传单和传单绘制版本

对我来说：

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

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

转到node-module/leaflet-draw/dist/leaflet。draw.js

更新包

替换这部分代码：（我不能给你行，因为它是一个缩小的文件，所以你必须 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

最后一件事是告诉 angular 替换正确的传单绘图文件

为此，您必须进入 angular package.json 并添加这一行：

“安装后”：“补丁包”

像这样：

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

删除你的节点模块包

进行新安装 (npm install)

现在可以使用矩形绘制功能了

如果你只需要在本地，你只需要更新leaflet-draw.js文件。

Answer 3

我'fixed'它与

rectangle: <any>{ showArea: false },

Leaflet Draw on rectangle draw 它抛出错误

Leaflet Draw on rectangle draw it throws error

leaflet

ngx-leaflet

leaflet-draw

传单绘制选项

识别并修复错误

解决方案 1：禁用 ShowArea

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