解决Leaflet:Cannot read property '_layerAdd' of null问题

912 阅读2分钟

直接原因

leaflet检测到浏览器不支持svg,所以像添加polyline之类需要用svg进行绘制的方法无法执行,就会报标题的错。

解决方法

全局搜索leaflet,查找Ji = !(!document.createElementNS || !E("svg").createSVGRect)这段代码,并修改为Ji = (typeof SVGRect !== 'undefined') 即可。

解决过程

在测试环境的时候基于leaflet的地图服务能够正常使用,但是到了正式环境发现加载不出来东西,首先先看了下控制台,发现报了如下错误:

定位到对应的代码,发现是添加poyline的时候发生的错误:

从错误信息中可以看到是执行到addLayer函数的时候报的错。

我们先直接定位到addLayer函数并执行一次,定位发生错误的原因,发现传入addLayer函数的参数为null。

接着查看堆栈中前一步的执行函数,找到getRenderer函数,发现传入的addLayer函数的 i 为null,那我们就观察下 i 是如何赋值的:

定义变量 i 时发现右边值为undefined,于是继续执行_createRenderer函数,_createRenderer函数返回值的前半段this.options.preferCanvas && $t(t)为false。

继续执行Qt(t)函数:

此时已经找到变量 i 为null的原因, Ji || $i为false,于是先观察下Ji的值,发现它的值为false,下一步,找到变量Ji是如何定义的:

找到E函数:

发现Ji是用于判断浏览器是否支持svg的,这边直接返回一个false,但是我的运行环境是edge 85版本的,是支持svg的,也就是说这里的判断出了问题,把这段代码直接放到控制台是没有问题的。

于是继续执行代码,发现svg的命名空间http://www.w3.org/2000/svg中的http被服务器强制改为了https,导致E("svg").createSVGRect返回了undefined,于是Ji变为了false,终于找到了问题的核心。

那解决方法就很简单了,换一种方式判断浏览器是否支持svg。

到此结束。

说明

Leaflet版本: V1.3.4

服务器环境:Nignx

此方法不一定适用于所有的情况,只是分享下解决问题的思路。