首页 / 浏览问题 / WebGIS / 问题详情
使用vue npm引入leaflet-draw报错,急!!!
4EXP 2023年08月04日

npm install leaflet-draw@1.0.4命令安装leaflet-draw插件并引入之后,

使用时报错,vue.runtime.esm.js:1888 TypeError: _leaflet.default.Control.Draw is not a constructor

我想知道是什么原因并且该怎么解决这个问题?

下面是我的依赖包版本,依赖引入,报错部分代码,还有报错信息

1个回答

你好,请问是同时引入supermap  iclient  for leaflet 和原生Leaflet吗?超图的iclient for leaflet是基于原生leaflet开发的,如果同时引入,可能在接口层面会有调用错误以及版本不同导致的不知名错误。建议只引入一个包。

如果使用iclient for leaflet 请参考:https://blog.csdn.net/supermapsupport/article/details/109294147

1,850EXP 2023年08月04日

您的博客中不也是这样引入的吗,我觉得跟这个关系不大,我的地图也能正常使用

我现在的问题是使用leaflet-draw绘制控件的时候报错,无法使用,我该怎么解决呢?

也就是这个功能,用vue实现,有完整的教程吗?谢谢了

这边本地测试绘制是正常的。如果引入npm install leaflet-draw@1.0.4没有报错的话,可以按提供的测代码试一下。

测试项目链接:https://pan.baidu.com/s/1gLQYAc6SolsojQBAhEtErA 
提取码:2ii0

非常感谢您的回答,我的问题已经解决,这里说一下问题的原因,问题出现在依赖导入这个地方

图中这里重复导入了leaflet.js,所以对leaflet的L对象进行了覆盖(因为import L from 'leaflet'已经导入了一次)

第一次L对象是有Control.Draw的。可以打印L对象查看。

第二次导入(import 'leaflet/dist/leaflet')后,L对象就没有Control.Draw了,所以就出现了上图控制台的报错,提示L.Control.Draw is not a constructor

把这一行注掉之后就没有问题了,能够出现多边形工具栏了

这种坑踩到了很难发现,所以告诫我们依赖不要乱导crying

好的,解决问题就行。
...