Leaflet.VectorGrid加载点矢量瓦片鼠标点击报Cannot read properties of undefined的解决办法

￡神魔★判官ぃ 2024-02-05 22:30 34阅读 0赞

###  ###

**目录**

前言

一、数据介绍

1、矢量瓦片元数据

二、矢量瓦片渲染

1、设置瓦片渲染配置

2、地图加载及事件绑定

3、初始加载

三、问题解决

1、问题查找

2、问题解决

3、最后效果

总结

--------------------

### 前言 ###

在之前的博客中，对于在Leaflet中加载使用Leaflet.VectorGrid来实现矢量瓦片的渲染，曾经写了几篇博客。感兴趣的博客可以在以下的连接中进行参阅。

<table> 
 <tbody> 
  <tr> 
   <td style="width:89px;">序号</td> 
   <td style="width:445px;">博客地址</td> 
  </tr> 
  <tr> 
   <td style="width:89px;">1</td> 
   <td style="width:445px;"><a href="https://blog.csdn.net/yelangkingwuzuhu/article/details/135317689" title="解决基于VectorGrid的矢量瓦片Y轴偏移的问题" rel="nofollow">解决基于VectorGrid的矢量瓦片Y轴偏移的问题</a></td> 
  </tr> 
  <tr> 
   <td style="width:89px;">2</td> 
   <td style="width:445px;"><a href="https://blog.csdn.net/yelangkingwuzuhu/article/details/134252862" title="浅谈前端自定义VectorGrid矢量瓦片样式" rel="nofollow">浅谈前端自定义VectorGrid矢量瓦片样式</a></td> 
  </tr> 
  <tr> 
   <td style="width:89px;">3</td> 
   <td style="width:445px;"><a href="https://blog.csdn.net/yelangkingwuzuhu/article/details/134099451" title="基于VectorGrid加载GeoServer发布的矢量瓦片实例" rel="nofollow">基于VectorGrid加载GeoServer发布的矢量瓦片实例</a></td> 
  </tr> 
 </tbody> 
</table>

以上的博客中关于如何使用VectorGrid来进行矢量瓦片的渲染进行了详细的说明，但是上述矢量瓦片的数据类型均是面和线数据居多，没有对点数据进行渲染展示。常见会进行POI和城市设施点进行数据渲染展示。

在使用Leaflet.VectorGrid1.3.0进行点矢量瓦片数据的渲染时，再打开事件交互后，以mouseover为例，当事件添加后，鼠标悬停时，并没有展示相应的数据，反而在控制台下方报错。如下方所示：

![dd5fb3f15dc24c08ba1c0b5cc5491994.png][]

本文将介绍在Leaflet.VectorGrid中如何解决点矢量数据加载时，添加事件监听时，发生错误的解决办法，如果您当前也存在这些问题，可以尝试这种解决办法，或许能解决遇到的问题。

## 一、数据介绍 ##

在进行正式渲染之前，把涉及的数据进行一下简单的介绍。地图上主要包含3中数据，底图采用的高德的在线影像，全国省份数据用的是自己发布的面矢量瓦片，点数据是全国地质灾害的点数据。从灾害类型可分为：小型、中型、大型。

<table> 
 <tbody> 
  <tr> 
   <td style="width:53px;">序号</td> 
   <td style="width:90px;">说明</td> 
   <td style="width:538px;">地址</td> 
  </tr> 
  <tr> 
   <td style="width:53px;">1</td> 
   <td style="width:90px;">高德影像</td> 
   <td style="width:538px;"><a href="https://wprd01.is.autonavi.com/appmaptile?&amp;x=%7Bx%7D&amp;y=%7By%7D&amp;z=%7Bz%7D&amp;lang=zh_cn&amp;size=2&amp;scl=1&amp;style=6&amp;ltype=7" rel="nofollow" title="https://wprd01.is.autonavi.com/appmaptile?&amp;x={x}&amp;y={y}&amp;z={z}&amp;lang=zh_cn&amp;size=2&amp;scl=1&amp;style=6&amp;ltype=7">https://wprd01.is.autonavi.com/appmaptile?&amp;x={x}&amp;y={y}&amp;z={z}&amp;lang=zh_cn&amp;size=2&amp;scl=1&amp;style=6&amp;ltype=7</a></td> 
  </tr> 
  <tr> 
   <td style="width:53px;">2</td> 
   <td style="width:90px;">省矢量瓦片</td> 
   <td style="width:538px;"><a href="http://localhost:8086/data/province-4326/%7Bz%7D/%7Bx%7D/%7By%7D.pbf" rel="nofollow" title="http://localhost:8086/data/province-4326/{z}/{x}/{y}.pbf">http://localhost:8086/data/province-4326/{z}/{x}/{y}.pbf</a></td> 
  </tr> 
  <tr> 
   <td style="width:53px;">3</td> 
   <td style="width:90px;">地灾瓦片</td> 
   <td style="width:538px;"><a href="http://localhost:8086/data/dizai1228/%7Bz%7D/%7Bx%7D/%7By%7D.pbf" rel="nofollow" title="http://localhost:8086/data/dizai1228/{z}/{x}/{y}.pbf">http://localhost:8086/data/dizai1228/{z}/{x}/{y}.pbf</a></td> 
  </tr> 
 </tbody> 
</table>

### 1、矢量瓦片元数据 ###

上述的两种矢量瓦片，省和地灾瓦片是采用本地存储的方式。以省份瓦片为例，其目录如下：

![90a1097243bd49358db7ef8665574e1b.png][]

其中，metadata.json是用于描述矢量瓦片的元数据信息，

![607f4f56c95c48b195b3f1960af5f717.png][]

通过上述的json描述可以知道，矢量瓦片的参数信息，比如中心点位置、边界、数据格式、图层信息包括图层唯一标识符还有属性字段。这些在地图加载的时候是有用的。

这里需要注意一下，对于metajson描述的信息，name和加载瓦片对应的图层不一定是一一对应的，由此要注意，以地灾数据为例。

![36a1c06634764df58388f929af56b309.png][]

在进行样式匹配的时候，一定是要用json描述中的vector\_layers中的id属性，不要用name避免出现矢量瓦片无法渲染的问题。

## 二、矢量瓦片渲染 ##

在之前的博客中已经介绍了Leaflet.VectorGrid的渲染方式，这里不在赘述，将主要的代码贴出来。

### 1、设置瓦片渲染配置 ###

在上述的代码中，使用interactive：true开启了相关事件，如果设置为false，那么无法进行事件响应。

### 2、地图加载及事件绑定 ###

var vectorTile2 = new L.vectorGrid.protobuf(pbfUrl2, vectorTileOptions2).addTo(map);
    	
    	vectorTile2.on('mouseover', function (e) {    
    		var properties = e.layer.properties; 
    		//console.log(properties);
    		L.popup()
    		 .setContent(properties.名称 + "<br/>" + properties.灾害类 + "<br/>" + properties.地理位)
    		 .setLatLng(e.latlng)
    		 .openOn(map);  
    	});

### 3、初始加载 ###

上述代码即完成了地灾矢量瓦片的渲染，将静态html文件使用nginx等服务器进行发布后，可以在浏览器中查看效果。

![5843bb7212894838a10ed04a1c273d4b.png][]

可以看到，完美的重现了开始提到的问题。

## 三、问题解决 ##

通过异常可以看到，主要的问题就是点数据的经纬度问题。

![eaaaa6f02c834714bca6ea04b4bab0f9.png][]

刚开始碰到这个问题的时候，我也以为是切的矢量瓦片的问题，因此在数据源上找了很久，然后使用mapbox的框架进行加载，毫无问题。

### 1、问题查找 ###

带着问题，在尝试了解决办法没有解决后，打开了开源地址，找到了issue，才发现原来已经有前辈替我踩坑了。来看看原贴[原始267][267]：

![90d243ae4e1f46e8aa9d02f9169c59ee.png][]

这里提供了一个线索，打开这个连接[地址][Link 1]，

![bbf44f049fdd4e6d82c6dcacfc589a67.png][]

![b126ec364def4bc19ec1c21755d78765.png][]

### 2、问题解决 ###

在找到问题之后，在来看看如何解决的，[解决方案][Link 2]。

![0d982d05cb6e4038a2b23586311fe58e.png][]

原文是这么描述的，

Point Symbolizer instances inherit from marker or circlemarker, but they lack latlng information, and on mouseover or click, leaflet will error on these features if it finds the getLatLng method, since that indicates it should be treated as a real marker instance, but even though the method is there, the value isn't, so leaflet produces an error.
    
    Maybe these instance should have a latlng, I don't know, this was just an easy fix so that I could continue to use vectorgrid protobuf support with points and have mouseover and click events work.

英文不好，使用某度翻译过来就是：

点符号化器实例继承自标记或circlemarker，但它们缺乏定位信息，当鼠标悬停或单击时，如果传单找到getLatLng方法，它将在这些功能上出错，因为这表明它应该被视为真正的标记实例，但即使该方法存在，值也不存在，因此传单会产生错误。
    
    也许这些实例应该有一个平台，我不知道，这只是一个简单的修复，这样我就可以继续使用vectorgrid protobuf对点的支持，并让鼠标悬停和点击事件正常工作。

getLatlng方法对此有影响，因此我们可以在创建图层时，将getLatlng进行置空。创建图层的方法在Leaflet.VectorGrid.js文件中，大概496行

_createLayer: function(feat, pxPerExtent, layerStyle) {
    		var layer;
    		switch (feat.type) {
    		case 1:
    			layer = new PointSymbolizer(feat, pxPerExtent);
    			break;
    		case 2:
    			layer = new LineSymbolizer(feat, pxPerExtent);
    			break;
    		case 3:
    			layer = new FillSymbolizer(feat, pxPerExtent);
    			break;
    		}
    
    		if (this.options.interactive) {
    			layer.addEventParent(this);
    		}
    
    		return layer;
    	},

在创建new PointSymbolizer(feat, pxPerExtent);时，将layer.getLatLng = null;即可

![36bf7191387e4f3e953199af96cc7cdb.png][]

### 3、最后效果 ###

![04bc2685efdc4a258e90311f996a3c6a.png][]

至此，点矢量瓦片不能加载的问题完美解决，感谢开源社区，也许这就是开源的魅力所在。

## 总结 ##

以上就是本文的主要内容，本文将介绍在Leaflet.VectorGrid中如何解决点矢量数据加载时，添加事件监听时，发生错误的解决办法，如果您当前也存在这些问题，可以尝试这种解决办法，或许能解决遇到的问题。

[dd5fb3f15dc24c08ba1c0b5cc5491994.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/3c75e798aedb4388a000c62837a73a80.png
[90a1097243bd49358db7ef8665574e1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/7596db7dfce1487a956ec8291b4d4d56.png
[607f4f56c95c48b195b3f1960af5f717.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/5c31a4816ab2435682463b7ab4f89ca3.png
[36a1c06634764df58388f929af56b309.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/19a5dc8f61ca4146bc150692e79a9e13.png
[5843bb7212894838a10ed04a1c273d4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/c621b1a6f39a43528e28100ba2beca7d.png
[eaaaa6f02c834714bca6ea04b4bab0f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/c2ca1fc6eb164336832331984b97a6d8.png
[267]: https://github.com/Leaflet/Leaflet.VectorGrid/issues/267
[90d243ae4e1f46e8aa9d02f9169c59ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/eb59be1e803248519b5d446d4f7da33a.png
[Link 1]: https://github.com/Leaflet/Leaflet.VectorGrid/issues/148
[bbf44f049fdd4e6d82c6dcacfc589a67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/4058539ce0504b2988f910be1c0225a6.png
[b126ec364def4bc19ec1c21755d78765.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/a21a806cc7ef42b698e7957ffcbe249a.png
[Link 2]: https://github.com/Leaflet/Leaflet.VectorGrid/pull/157
[0d982d05cb6e4038a2b23586311fe58e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/92907b50c65c4fbe835abbbeac311fe4.png
[36bf7191387e4f3e953199af96cc7cdb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/4c200a7c787d4a12992e6d49441e40d9.png
[04bc2685efdc4a258e90311f996a3c6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/257a3d7abc324219ae33d997f0d0a8d7.png