MapBox采用marker方式加载图标图层（解决symbol图标丢失问题）

众所周知mapbox常用的加载图标类图层的方式是使用symbol。配置他的icon-image来在地图上展示图标类图层。但是这样的方式存在一个问题，由于canvas加载图片是使用的fetch，因此会存在图片丢失的问题。也就是点要素已经添加在地图上了，但是点要素对应的图片还没请求回来，mapbox在这方面的处理是请求不回来就不请求了，然后给你抛出一个监听，叫做：styleimagemissing，然而我发现在这个监听里面写代码显得尤为费劲，即使你在这个监听里再次请求没请求成功的图片，也不会再次触发地图渲染，必须调用map.repaint()。这样一来岂不是陷入了死循环。这就比较坑了。于是我发现了另一种加载图标图层的方法——使用marker。

我们在之前的文章中说过，marker是可以添加dom元素到地图上的。利用这个特性，我们可以把html的img元素，以marker 的方式渲染到地图上。

可能有的同学会担心mark的方式有交互方面的问题，担心不能点击？不能传递数据？不能过滤？等等，大家其实并不比担心这个问题。我会在下文一一介绍这些问题。

首先对于交互来讲，marker也能够设置弹窗popup。并且对于交互来讲，popup都是一样的，你是用symbol渲染图层用到popup的时候也是同样的调用方法。

对于数据的传递方面。虽然mapbox没有给我们提供点击marker时触发的监听。点击地图map.on('click',()=>{})也不会获取到当前的marker。但是别忘了我们可以利用img元素的点击事件向外暴露数据。html元素可以绑定点击事件的啊！我们点击到marker上