> 文章列表 > MapBox动态气泡图渲染教程

MapBox动态气泡图渲染教程

MapBox动态气泡图渲染教程

先来看效果

视频效果:

屏幕录制2023-02-22 15.34.57

首先我们来介绍一下思路。对于mapbox和openlayers这样的框架来讲,气泡图中的气泡本质上就是一个div,就是将一个dom元素追加到canvas上的固定位置而已。

在mapbox中有marker的概念,官网也有示例

Attach a popup to a marker instance | Mapbox GL JS | Mapbox

 因此我们就依据这个示例稍微做一些改动,来实现气泡图的效果。

首先我们来准备一些假数据:

var point = [{name: \"qipao1&