antv l7 加载图层报错以及加载地图不出现问题记录和报错解决的步骤分享

这个问题应该遇到的人很少吧

1.在使用antv l7 加载图层时引起的报错.

报错记录: Uncaught (in promise) TypeError: l7hammerjs__WEBPACK_IMPORTED_MODULE_13___default.a.Manager is not a constructor
截图:

排查报错来源:

jweixin-1.4.0.js 这个js影响,影响原因未知 jweixin-1.4.0.js文件进行了混淆没有源码.

2.使用antv l7实现地图时,在代码没有问题的情况下 地图不出来 并且页面没有报错

项目中使用了mock来初始化静态数据,导致地图加载不出来=>(后来就直接去掉了mock的功能就解决了 地图能加载成功了)

写在后面:

以下是到此为止在解决报错时的一些经验总结.

排查思路理清晰你就可以更快的发现问题,解决问题.当我们遇到一些难以解决的问题时就需要以一个较为合理的方法步骤去排除报错了,虽然这需要较长时间.以下是大致步骤,需根据自身实际情况对问题进行排查.

排查思路:

背景:项目中以组件的形式调用antv l7的地图,此前已经加载过其他的依赖,并且是在我能加载mapbox底图的基础上,在使用this.scene.on(“loaded”, () => {}) 加载图层时出现的以上报错.

大致步骤:

1.百度=>2.百度不到,(1.debug确定大致范围 2.换一种实现方式) =>3.排除法=>4.排除依赖问题=>5.排除自身代码问题

详细步骤:

1.百度

直接搜索以上报错=>没有直接收到与这个报错有关的解决方案,但是一个间接相关的指向是与项目依赖或者依赖的版本有关.(考虑解决方案:一个个排除原有项目中的依赖npm的依赖以及public中使用cdn方式引入.但是根据实际情况需要排除的依赖太多一个个排除需要消耗较长时间 实在没办法再排依赖问题),能百度到就一个个方法试了.

(也可自行debug查看报错来源=>由于源码调用的js以及其中js调用逻辑较多,需要理清antv l7的逻辑耗时较长并且不能确定是否能找到错误位置以及错误的解决方法.所以我只debug确定的报错的方法的大概位置)

(不想解决就考虑,是否还有可以替代此功能的其他方法采取曲线救国的方式=>(没有就只能排报错原因了))

2.排除法:

2.1: 排除代码以及antvl7 使用方法错误.

(解决方法:新建一个项目在其中复现antv l7官网的样例=>结果:可以复现成功,调用方式没有错误)

2.2:排除是否是自己框架的问题

(解决方法:写一个简单的vue页面,使用antv l7加载地图底图和图层然后直接调用 排除是自己框架的问题=>结果:直接调用单独的页面加载图层爆同样的错误,排除自己框架的问题)

2.3:排除以上剩下就只能排除依赖以及自己代码里面的问题了(依赖冲突+自身代码冲突)

2.3.1依赖冲突(npm+cdn引入的)

快速找出依赖对报错是否存在直接影响

2.3.1.1 npm依赖

思路:在重新建的项目中先备份原有package.json文件,然后直接将有问题的项目的package.json文件替换到新文件运行后看报错是否还存在(结果=>不存在报错需要继续排),如果报错就需要一个个排

2.3.1.2 cdn依赖

思路:比较少的化就一个个注释,重新运行.比较多也可全部替换.(结果=> "<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>"影响了报错=>找到问题后需要考虑解决方案=>1.下载源码看报错问题在哪2.不使用这个js )
因为时间有限,这个js源码下载后代码被混淆了,并且项目本身没有使用这个js 就直接去掉这个js问题就解决了.

2.3.2自身代码冲突

排到上一步报错就解决了,但是也遇到过需要排自身代码对你使用的一个新的框架的影响.
也是在实现antv l7地图时 项目中使用了mock来初始化静态数据,导致地图加载不出来并且项目没有任何报错 =>(后来就直接去掉了mock的功能就解决了 地图能加载成功了)
需要排自身代码错误时可以优先考虑mock是否对项目造成影响