直接原因
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
此方法不一定适用于所有的情况,只是分享下解决问题的思路。