Openlayers Overlay使用心得

Overlay在Openlayers里是浮動層的概念，區別於vector這樣的圖層，通常用於彈窗、撒點、以及解決加載icon樣式不支持的gif等格式圖片。

此次用overlay的過程中遇到很多問題，在此記錄

一、創建Overlay

先簡單理一下overlay加載機制：如果我定義了一個id為marks的div標簽

創建overlay的時候elementid指向這個marks的div：

 則會在ol-viewport的容器里，生成如下的結構：（當調用ol.Map()這個構造函數時，OpenLayers地圖引擎會在內部創建一個視口容器（viewport container，一個css類名為ol-viewport的div DOM元素）並將其放置在target屬性映射的地圖容器元素中）

二、移除Overlay

移除overlay有很多方法，這里嘗試過的都列在下面

1、刪除overlay圖層

#這種方式會把overlay以及其指向的DOM都刪除，對於再要新增overlay到這個DOM就會有問題（如點擊彈窗）

map.removeOverlay(_overlay);

2、刪除map中所有overlay圖層，原理同1

map.getOverlays().clear();

3、推薦，這種方式會保留dom，但要記得在下次新增同類時刪除，否則會生成好多dom造成冗余殘留

overlay.setPosition(undefined);

overlay = null;

4、刪除map中所有overlay圖層，原理同3

        let olLyrs = this.encmap.getOverlays().getArray();
        let olLyrsLength = this.encmap.getOverlays().getArray().length;
        for(let i = 0;i < olLyrsLength;i++){
            olLyrs[i].setPosition(undefined);
            //olLyrs[i] = null;
        } 

三、Overlay冒泡機制

遇到一個問題：在overlay彈窗存在滾動條的情況下，鼠標滾輪滾動，地圖縮放和overlay彈窗會一起觸發。

這時候設置一下overlay的stopEvent，設置為true即可阻止冒泡