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


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

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


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

    openlayers官网示例

    openlayers API之地图鹰眼OverviewMap

    openlayers官方API文档——OverviewMap

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

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

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

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

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

    20200603181840

    缩略图的原理就是利用两个地图相关联,那么我们使用的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可能会因为缩放或平移而导致显示问题。如果没有缩略图,只会在极小比例尺突然放大到较大比例尺,网络未能及时加载资源的的情况下出现这种情况。但如果缩略图使用了同源矢量图层,导致主图比例尺大时,缩略图仍然处在小比例尺,两幅图显示会出现混乱问题--矢量线段被错误简化了,从而影响主图的观感)
      这个问题在平移时尤为明显,简直无法忍受。下面两幅图说明了这个问题:

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

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

    当然,如果new一些数据源相同(例如相同url的WMS瓦片)的图层作为缩略图的图层,也就不会存在上述问题了。
    因此可以总结一下,这个问题(地图闪烁,矢量图显示异常等)的核心就是“与相同图层有关,与相同数据源无关”>。
    在这里插入图片描述
    最后还得补充一句,由于OverviewMap实现时相当于创建了一个新的map,那么这个map中的view,source等参数是必不可少的,必须要进行相关设置。同时还要注意,主图和缩略图之间的空间参考系SRS必须一致。

  • 相关阅读:
    [dubbo实战] dubbo+zookeeper伪集群搭建 (转)
    [Dubbo实战]dubbo + zookeeper + spring 实战 (转)
    DUBBO本地搭建及小案例 (转)
    【Dubbo实战】 Dubbo+Zookeeper+Spring整合应用篇-Dubbo基于Zookeeper实现分布式服务(转)
    Quartz集成springMVC 的方案二(持久化任务、集群和分布式)
    【Quartz】Quartz的搭建、应用(单独使用Quartz)
    Javascript判断Crontab表达式是否合法
    给Java程序员的几条建议
    使用maven编译Java项目
    使用Docker运行Java Web应用
  • 原文地址:https://www.cnblogs.com/ssjxx98/p/13040190.html
Copyright © 2020-2023  润新知