如何在高德地图上实现可视化图层合并渲染？

如何在高德地图上实现可视化图层合并渲染？

摘要

最近对可视化图层组件做了重大优化，解决了不少问题，涉及到多个场景的合并渲染，后期效果的叠加渲染等等，在这里总结一些经验跟大家分享。

在可视图层的开发过程中必须解决的一个问题就是多个场景（图层）的渲染，比如在地图上显示交通路线、区域范围、兴趣点3个场景，在视觉上是处于同个空间系统，又能够实现分层控制。最容易想到的办法就是为每个场景创建一个Canvas，并将Canvas标签叠加起来。

这样做首先会遇到的问题是图层的数量会受限。浏览器对单个页面虽然不限制Canvas标签的数量，但对运行的WebGL上下文数量是有限制的，例如PC上的chrome支持的上限可能是8个（没有明确说法），手机平板等移动终端会更受限， 超越上限时就会出现类似下面的错误，最先创建的上下文会直接被启用不显示。本文的核心问题就是解决WebGL共享的问题。