vue+mapbox实现聚合以及自定义图片图层、元素激活、显示popup、自定义marker

功能背景:

当地图上数据量过大,需要在高层级聚合显示数字,低层级显示具体图标的时候,就需要使用聚合来实现了

官网图示:

官网地址:[mapbox聚合示例](https://docs.mapbox.com/mapbox-gl-js/example/cluster/)
vue+mapbox实现聚合以及自定义图片图层、元素激活、显示popup、自定义marker_第1张图片

实际效果:

低层级的情况下:
vue+mapbox实现聚合以及自定义图片图层、元素激活、显示popup、自定义marker_第2张图片
缩放开始聚合:
vue+mapbox实现聚合以及自定义图片图层、元素激活、显示popup、自定义marker_第3张图片
完全聚合:
vue+mapbox实现聚合以及自定义图片图层、元素激活、显示popup、自定义marker_第4张图片

鼠标悬停显示popup:
vue+mapbox实现聚合以及自定义图片图层、元素激活、显示popup、自定义marker_第5张图片
点击元素选中元素,激活状态:<

你可能感兴趣的:(mapbox,vue.js,前端,javascript)