先來看效果：

視頻效果：

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

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

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

 因此我們就依據(jù)這個示例稍微做一些改動，來實現(xiàn)氣泡圖的效果。

首先我們來準備一些假數(shù)據(jù)：

var point = [{name: "qipao1&