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必須一致。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM