记mapboxGL实现鼠标经过高亮时的一个问题

概述

mapboxGL实现鼠标经过高亮可通过注册图层的mousemove和moveout事件来实现，在mousemove事件中可以拿到当前经过的要素，但是当使用该要素时，发现在某个地图级别下会有线和面数据展示不全的情况。究其原因，发现是mapboxGL在绘图的时候为提升效率也会进行切片，所以图层事件返回的要素时切片后的，当数据范围比较大、地图级别比较大的时候，必然会分成多块。

表现

实现

js 复制代码

fetch('/data/999999.geojson')
  .then(res => res.json()).then(res => {
    const adminFeatures = res.features
    map.on("mousemove", "admin-boundry-fill", (e) => {
      // const feature = e.features[0]  // 此种方式会有图形不完整的情况
      const adcode = e.features[0].properties.adcode;
      const feature = adminFeatures.find(
         (d) => d.properties.adcode === adcode
       );
      map.getSource("admin-boundry-h").setData(feature);
      map.getCanvasContainer().style.cursor = "pointer";
    });
    map.on("mouseout", "admin-boundry-fill", (e) => {
      map.getSource("admin-boundry-h").setData(new Geojson());
      map.getCanvasContainer().style.cursor = "default";
    });
  })