项目场景:
前段时间想学习一下Leaflet,于是就在Vue项目中引入了SuperMap iClient for Leaflet,由于是第一次接触就完全按照官方步骤一步一步操作,结果项目一启动浏览器就报错。今天看到有朋友私信问我是否解决,我就想着写一篇文章简单总结一下。
问题描述
主要就是两个错误:
1.Cannot read properties of undefined (reading 'TiledMapLayer')
2. Cannot read properties of undefined (reading 'lat')
解决方案:
问题一:Cannot read properties of undefined (reading 'TiledMapLayer')
针对问题一我想大部分朋友一定是跟我一样用了官方教程中的“ 全模块引入”方法导致的,如果不是那就需要检查一下依赖包是否安装成功。我最后的解决办法就是采用如下“部分模块引入”的方法,问题一的报错果然就没有了,至于为什么按照官方的全模块引入会报这个错误,我在超图社区看到的回答都是让再检查引入方式以及环境配置等,在CSDN上看到一篇文章是说:“11.0版本以上的超图Leaflet依赖包不支持全模块引入了”。不过不管是什么原因这个报错采用部分模块引入的方法就可以解决,而且部分模块引入会使项目打包和运行速度更快。
顺便提一句:使用Vue3的朋友要注意一定不要忘了要将地图加载的方法(L.map)写在“onMounted”钩子中,否则组件还未渲染就会导致找不到“map”的DOM从而报——Map container not found的错误。
var L = require('leaflet');
var TiledMapLayer = require('@supermap/iclient-leaflet').TiledMapLayer;
var url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [0, 0],
maxZoom: 18,
zoom: 1
});
TiledMapLayer(url).addTo(map);
问题二:Cannot read properties of undefined (reading 'lat')
在我解决完问题一后本以为就能看到地图了,结果没想到浏览器又报了Cannot read properties of undefined (reading 'lat')的错误,检查了半天也没找到问题所在,搜了很多方法,有的说是引入问题,有的说是config文件配置问题,有的说是依赖包问题,逐一尝试之后依旧没有解决,最后看到超图问答社区有说重新卸载安装几次依赖包之后就好了,于是我就抱着试一试的心态果然成功了。
以下是我解决后回复的评论仅供大家参考:
至于为什么会出现这种情况,超图社区大佬回复:“npm多次安装成功的话可能是网络情况哦,使用npm安装的话 leaflet本身不需要手动安装的,仅npm iclient for leaflet就可以。”