众所周知mapbox常用的加载图标类图层的方式是使用symbol。配置他的icon-image来在地图上展示图标类图层。但是这样的方式存在一个问题,由于canvas加载图片是使用的fetch,因此会存在图片丢失的问题。也就是点要素已经添加在地图上了,但是点要素对应的图片还没请求回来,mapbox在这方面的处理是请求不回来就不请求了,然后给你抛出一个监听,叫做:styleimagemissing,然而我发现在这个监听里面写代码显得尤为费劲,即使你在这个监听里再次请求没请求成功的图片,也不会再次触发地图渲染,必须调用map.repaint()。这样一来岂不是陷入了死循环。这就比较坑了。于是我发现了另一种加载图标图层的方法——使用marker。
我们在之前的文章中说过,marker是可以添加dom元素到地图上的。利用这个特性,我们可以把html的img元素,以marker 的方式渲染到地图上。
可能有的同学会担心mark的方式有交互方面的问题,担心不能点击?不能传递数据?不能过滤?等等,大家其实并不比担心这个问题。我会在下文一一介绍这些问题。
首先对于交互来讲,marker也能够设置弹窗popup。并且对于交互来讲,popup都是一样的,你是用