高德地图Loca库事件处理方案

65 阅读1分钟

简介

Loca是高德提供的基于WebGL实现的高性能的可视化库,该库基于标准的WebGL查询方案针对每个图层提供了queryFeature方法,没有提供类似于AMap中的标准的click、mouse等事件,因此在使用事件时需要自己额外处理一下,下面就针对不同的场景下使用提供不同的处理逻辑介绍。

单图层事件

对于单独的图层,我们可以直接使用图层实例中的queryFeature进行查询。示例代码如下: 从上面click事件的效果来看,当两个loca图层叠加时,两个图层的queryFeature都会查找到数据,这样就会导致业务逻辑出现混乱,所以直接对指定图层进行查询的方式只适用于只有一个图层进行事件绑定的情况。

多图层事件

上面单图层事件的问题就引发了思考,怎么实现多图层的冒泡处理,Loca本身是没有提供冒泡阻塞的接口,但我们可以通过获取Loca内部缓存的图层数组来变通的实现。具体实现步骤:

  1. 获取Loca内部缓存的图层数组,loca.layers
  2. 将layers内的图层放到新的数组中,防止影响loca内部执行
  3. 根据图层的zIndex进行排序
  4. 对图层数组进行循环执行queryFeature,一旦某个图层查询到数据就终止循环

示例代码如下: