openlayers API实现鹰眼图OverviewMap时地图不断闪烁等问题的解决思路

前言：我吐了，OpenLayers的巨坑之一——鹰眼图OverviewMap创建之必备注意事项。

许久没有更新博客的我，在今天饱受折磨之后一定要分享一下（这么过分一定要说出来.jpg）

---

相信大家如果使用到openlayers显示web地图，都可能会想要实现一个缩略图（鹰眼图）的效果。关于这部分的内容的基础我就不赘述了，参考下面两篇文章以及官方API文档就够了。

openlayers官网示例

openlayers API之地图鹰眼OverviewMap

openlayers官方API文档——OverviewMap

照着这些例子做出来鹰眼图之后，却使得地图开始不断闪烁，人都给闪懵了（我把这个gif缩小了，保护大家的眼睛—_—）。

那么问题出在哪里呢？不难看到，我们的主图闪烁，其实是缩略图和主图之间在不断交替显示地图内容。

我测试之后，发现问题原来出在osm图层身上，只要在缩略图（overviewmap）和主图（map）中使用了同一个OSM的layer，闪烁就会发生，在主地图和缩略图间交替闪烁。

仔细想想，我们可以在官网api文档中找到这个问题的答案，官方对于overviewmap是这么描述的：

创建一个新的控件，其中一个地图作为另外一个已定义地图的缩略图

缩略图的原理就是利用两个地图相关联，那么我们使用的ol.Map和ol.control.OverviewMap本质上都是map。但是，这俩地图的缩放程度不同，osm又是一个综合的数据图层，如果使用了相同的OSM图层（图层的内存引用相同），就不能满足两幅地图上的相同osm图层（但要求的缩放比例尺不同）同时显示，这就是问题的根源。

那么我们的解决方案就是：避免使用那些在ol.Map的Layers中使用过的图层对象。重新new一个ol.layer的osm对象，添加到我们的ol.control.OverviewMap对象中即可（当然，为了避免代码重复，可以将生成这些重复layer对象的工作封装到函数里面）

但其实，不只是OSM图层会受到影响，根据我的判断，矢量图层ol.layer.Vector和图片图层ol.layer.Image也会受到一定程度的影响。

1. ol.layer.Vector可能会因为缩放或平移而导致显示问题。如果没有缩略图，只会在极小比例尺突然放大到较大比例尺，网络未能及时加载资源的的情况下出现这种情况。但如果缩略图使用了同源矢量图层，导致主图比例尺大时，缩略图仍然处在小比例尺，两幅图显示会出现混乱问题--矢量线段被错误简化了，从而影响主图的观感）
   
   这个问题在平移时尤为明显，简直无法忍受。下面两幅图说明了这个问题：

   
   

2. 图片图层ol.layer.Image的问题则是不断闪烁，平移时主图上的图片消失。闪烁问题似乎与OSM的如出一辙，但原因是否一样就不得而知了。

3. 对地图瓦片ol.layer.Tile（指ol.source.TileWMS）似乎影响不大，但为了避免以后不必要的问题，这里还是建议不要在缩略图（以及其他map中）使用相同图层

当然，如果new一些数据源相同（例如相同url的WMS瓦片）的图层作为缩略图的图层，也就不会存在上述问题了。

因此可以总结一下，这个问题（地图闪烁，矢量图显示异常等）的核心就是“与相同图层有关，与相同数据源无关”>。



最后还得补充一句，由于OverviewMap实现时相当于创建了一个新的map，那么这个map中的view，source等参数是必不可少的，必须要进行相关设置。同时还要注意，主图和缩略图之间的空间参考系SRS必须一致。