本文主要是介绍记mapboxGL实现鼠标经过高亮时的一个问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
概述
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";});})
这篇关于记mapboxGL实现鼠标经过高亮时的一个问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!