郑州做网站网站技术制作

概述

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

表现

实现

fetch('/data/999999.geojson').then(res => res.json()).then(res => {const adminFeatures = res.featuresmap.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";});})