Leaflet.VectorGrid加载点矢量瓦片鼠标点击报Cannot read properties of undefine
【摘要】 本文将介绍在Leaflet.VectorGrid中如何解决点矢量数据加载时,添加事件监听时,发生错误的解决办法,如果您当前也存在这些问题,可以尝试这种解决办法,或许能解决遇到的问题。
目录
前言
在之前的博客中,对于在Leaflet中加载使用Leaflet.VectorGrid来实现矢量瓦片的渲染,曾经写了几篇博客。感兴趣的博客可以在以下的连接中进行参阅。
序号 | 博客地址 |
1 | |
2 | |
3 |
以上的博客中关于如何使用VectorGrid来进行矢量瓦片的渲染进行了详细的说明,但是上述矢量瓦片的数据类型均是面和线数据居多,没有对点数据进行渲染展示。常见会进行POI和城市设施点进行数据渲染展示。
在使用Leaflet.VectorGrid1.3.0进行点矢量瓦片数据的渲染时,再打开事件交互后,以mouseover为例,当事件添加后,鼠标悬停时,并没有展示相应的数据,反而在控制台下方报错。如下方所示:
本文将介绍在Leaflet.VectorGrid中如何解决点矢量数据加载时,添加事件监听时,发生错误的解决办法,如果您当前也存在这些问题,可以尝试这种解决办法,或许能解决遇到的问题。
一、数据介绍
在进行正式渲染之前,把涉及的数据进行一下简单的介绍。地图上主要包含3中数据,底图采用的高德的在线影像,全国省份数据用的是自己发布的面矢量瓦片,点数据是全国地质灾害的点数据。从灾害类型可分为:小型、中型、大型。
序号 | 说明 | 地址 |
1 | 高德影像 | |
2 | 省矢量瓦片 | |
3 | 地灾瓦片 |
1、矢量瓦片元数据
上述的两种矢量瓦片,省和地灾瓦片是采用本地存储的方式。以省份瓦片为例,其目录如下:
其中,metadata.json是用于描述矢量瓦片的元数据信息,
通过上述的json描述可以知道,矢量瓦片的参数信息,比如中心点位置、边界、数据格式、图层信息包括图层唯一标识符还有属性字段。这些在地图加载的时候是有用的。
这里需要注意一下,对于metajson描述的信息,name和加载瓦片对应的图层不一定是一一对应的,由此要注意,以地灾数据为例。
在进行样式匹配的时候,一定是要用json描述中的vector_layers中的id属性,不要用name避免出现矢量瓦片无法渲染的问题。
二、矢量瓦片渲染
在之前的博客中已经介绍了Leaflet.VectorGrid的渲染方式,这里不在赘述,将主要的代码贴出来。
1、设置瓦片渲染配置
在上述的代码中,使用interactive:true开启了相关事件,如果设置为false,那么无法进行事件响应。
2、地图加载及事件绑定
3、初始加载
上述代码即完成了地灾矢量瓦片的渲染,将静态html文件使用nginx等服务器进行发布后,可以在浏览器中查看效果。
可以看到,完美的重现了开始提到的问题。
三、问题解决
通过异常可以看到,主要的问题就是点数据的经纬度问题。
刚开始碰到这个问题的时候,我也以为是切的矢量瓦片的问题,因此在数据源上找了很久,然后使用mapbox的框架进行加载,毫无问题。
1、问题查找
带着问题,在尝试了解决办法没有解决后,打开了开源地址,找到了issue,才发现原来已经有前辈替我踩坑了。来看看原贴
:这里提供了一个线索,打开这个连接
,2、问题解决
在找到问题之后,在来看看如何解决的,
。原文是这么描述的,
英文不好,使用某度翻译过来就是:
getLatlng方法对此有影响,因此我们可以在创建图层时,将getLatlng进行置空。创建图层的方法在Leaflet.VectorGrid.js文件中,大概496行
在创建new PointSymbolizer(feat, pxPerExtent);时,将layer.getLatLng = null;即可
3、最后效果
至此,点矢量瓦片不能加载的问题完美解决,感谢开源社区,也许这就是开源的魅力所在。
总结
以上就是本文的主要内容,本文将介绍在Leaflet.VectorGrid中如何解决点矢量数据加载时,添加事件监听时,发生错误的解决办法,如果您当前也存在这些问题,可以尝试这种解决办法,或许能解决遇到的问题。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论(0)