前言:我吐了,OpenLayers的巨坑之一——鹰眼图OverviewMap创建之必备注意事项。
许久没有更新博客的我,在今天饱受折磨之后一定要分享一下(这么过分一定要说出来.jpg)
相信大家如果使用到openlayers显示web地图,都可能会想要实现一个缩略图(鹰眼图)的效果。关于这部分的内容的基础我就不赘述了,参考下面两篇文章以及官方API文档就够了。
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也会受到一定程度的影响。
-
ol.layer.Vector可能会因为缩放或平移而导致显示问题。如果没有缩略图,只会在极小比例尺突然放大到较大比例尺,网络未能及时加载资源的的情况下出现这种情况。但如果缩略图使用了同源矢量图层,导致主图比例尺大时,缩略图仍然处在小比例尺,两幅图显示会出现混乱问题--矢量线段被错误简化了,从而影响主图的观感)
这个问题在平移时尤为明显,简直无法忍受。下面两幅图说明了这个问题: -
图片图层ol.layer.Image的问题则是不断闪烁,平移时主图上的图片消失。闪烁问题似乎与OSM的如出一辙,但原因是否一样就不得而知了。
-
对地图瓦片ol.layer.Tile(指ol.source.TileWMS)似乎影响不大,但为了避免以后不必要的问题,这里还是建议不要在缩略图(以及其他map中)使用相同图层
当然,如果new一些数据源相同(例如相同url的WMS瓦片)的图层作为缩略图的图层,也就不会存在上述问题了。
因此可以总结一下,这个问题(地图闪烁,矢量图显示异常等)的核心就是“与相同图层有关,与相同数据源无关”>。
最后还得补充一句,由于OverviewMap实现时相当于创建了一个新的map,那么这个map中的view,source等参数是必不可少的,必须要进行相关设置。同时还要注意,主图和缩略图之间的空间参考系SRS必须一致。