先來(lái)看效果：

視頻效果：

首先我們來(lái)介紹一下思路。對(duì)于mapbox和openlayers這樣的框架來(lái)講，氣泡圖中的氣泡本質(zhì)上就是一個(gè)div，就是將一個(gè)dom元素追加到canvas上的固定位置而已。

在mapbox中有marker的概念，官網(wǎng)也有示例：

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

 因此我們就依據(jù)這個(gè)示例稍微做一些改動(dòng)，來(lái)實(shí)現(xiàn)氣泡圖的效果。

首先我們來(lái)準(zhǔn)備一些假數(shù)據(jù)：

var point = [{name: "qipao1&