我leaflet + leaflet-draw + @ngx-leaflet + @ngx-leaflet-draw在 Angular 应用程序中使用。
我已经尝试了一切，版本更改，导入模块.forRoot()而不是，在我的文件中添加 js 文件angular.json，删除 node_modules，重新安装它们，从头开始遵循@ngx-leaflet-draw 上的指南一百次。
无论我做什么，当我尝试绘制一个矩形时，它总是会抛出这个错误：
即使处理程序存在并且所有处理程序都可以正常工作，除了矩形一个（我唯一需要的）
如果不是为了这个，我什至不知道如何为您提供更具体的信息：
leaflet：1.5.1leaflet-draw：1.0.4@asymmetrik/ngx-leaflet：6.0.1@asymmetrik/ngx-leaflet-draw：5.0.1我被这个愚蠢的错误困住了，我不知道如何克服它。请帮忙！
这是演示的回购：https ://github.com/caiusCitiriga/leaflet-rect-drawer
有几个问题：
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在分配之前未声明。代码在严格模式下运行，所以这将引发异常。这看起来是传单绘制中的错误。
首先，您可以禁用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 功能。
另一种解决方案是禁用 Typescript 编译器的严格模式。
为此，请编辑您的tsconfig.json和tsconfig.app.json文件，"noImplicitUseStrict": true在compilerOptions属性下添加。
这解决了问题，但现在您没有在严格模式下运行代码，这可能会导致其他问题。
传单绘图文件中存在打字问题
不幸的是，这个项目没有更多的支持
您可以更新 node-package 模块并解决问题，这是我的解决方案：
安装最后一个传单和传单绘制版本
为了我 ：
"leaflet": "^1.7.1",
"leaflet-draw": "^1.0.4",
并安装补丁包：https ://www.npmjs.com/package/patch-package
转到节点模块/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)
更新节点模块包后，您必须创建节点模块补丁
为此，请使用 patch-package 命令：
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 文件。
我“修复”了它
rectangle: <any>{ showArea: false },