Overlay 從名字看，是覆蓋圖、覆蓋物的意思，主要的用途就是在地圖之上再覆蓋一層，用以顯示額外的可見元素，可見元素一般是 HTML 元素，利用 overlay，可以將可見元素放置到地圖的任意位置，形成地圖上再浮動一層的效果。例如在地圖上相應的座標放置一個標誌，標籤，利用 overlay 都可以做到，具體來說，點選地圖上某位置，在點選位置彈出彈出框就是利用了 overlay。

      因為 overlay 是固定在特定座標的可見元素，因此移動地圖（pan操作）和進行縮放，overlay 會與地圖座標相對位置不變，跟著地圖移動。overlay 直接繼承了 ol.Object ，很多 ol.Object

注：這次的標題和之前的標題命名方式不同，是因為 overlay 並沒有一個標準的名字，在 GIS 中這種情況很常見。這種情況下，該中文名並不標準。

初始化屬性

       overlay 初始化時可以接受很多的配置引數，這些配置引數是一個個的鍵值對，共同構成一個物件字面量（options），然後傳遞給其“建構函式”，如 `new ol.Overlay(options)，此處的 options 便是引數鍵值對構成的物件字面量。可配置的鍵值對，定義如下：

/**
 * Object literal with config options for the overlay.
 * @typedef 
 
{{id: (number|string|undefined),
 *     element: (Element|undefined),
 *     offset: (Array.<number>|undefined),
 *     position: (ol.Coordinate|undefined),
 *     positioning: (ol.OverlayPositioning|string|undefined),
 *     stopEvent: (boolean|undefined),
 *     insertFirst: (boolean|undefined
 
),
 *     autoPan: (boolean|undefined),
 *     autoPanAnimation: (olx.animation.PanOptions|undefined),
 *     autoPanMargin: (number|undefined)}}
 * @api stable
 */
olx.OverlayOptions;

其含義分別如下：

• id，為對應的 overlay 設定一個 id，便於使用 ol.Map 的 getOverlayById 方法取得相應的 overlay；
• element，overlay 包含的 DOM element；
• offset，偏移量，畫素為單位，overlay 相對於放置位置（position）的偏移量，預設值是 [0, 0]，正值分別向右和向下偏移；
• position，在地圖所在的座標系框架下，overlay 放置的位置；
• positioning，overlay 對於 position 的相對位置，可能的值包括 bottom-left、bottom-center、bottom-right 、center-left、center-center、center-right、top-left、top-center、top-right，預設是 top-left，也就是 element 左上角與 position 重合；
• stopEvent，地圖的事件傳播是否停止，預設是 true，即阻止傳播，可能不太好理解，舉個例子，當滑鼠滾輪在地圖上滾動時，會觸發地圖縮放事件，如果在 overlay 之上滾動滾輪，並不會觸發縮放事件，如果想滑鼠在 overlay 之上也支援縮放，那麼將該屬性設定為 false 即可；
• insertFirst，overlay 是否應該先新增到其所在的容器（container），當 stopEvent 設定為 true 時，overlay 和 openlayers 的控制元件（controls）是放於一個容器的，此時將 insertFirst 設定為 true ，overlay 會首先新增到容器，這樣，overlay 預設在控制元件的下一層（CSS z-index），所以，當 stopEvent 和 insertFirst 都採用預設值時，overlay 預設在 控制元件的下一層；
• autoPan，當觸發 overlay setPosition 方法時觸發，當 overlay 超出地圖邊界時，地圖自動移動，以保證 overlay 全部可見；
• autoPanAnimation，設定 autoPan 的效果動畫，引數型別是 olx.animation.panOptions；
• autoPanMargin，地圖自動平移時，地圖邊緣與 overlay 的留白（空隙），單位是畫素，預設是 20畫素；

支援的事件

      支援的事件主要是繼承 ol.Object 而來的 change 事件，當 overlay 相關屬性或物件變化時觸發：

• change，當引用計數器增加時，觸發；
• change:element，overlay 對應的 element 變化時觸發；
• change:map，overlay 對應的 map 變化時觸發；
• change:offset，overlay 對應的 offset 變化時觸發；
• change:position，overlay 對應的 position 變化時觸發；
• change:positioning，overlay 對應的 positioning 變化時觸發；
• propertychange，overlay 對應的屬性變化時觸發；

那麼怎麼繫結相應的事件呢？openlayers 繫結事件遵循一般的 dom 事件繫結規則，包括 DOM 2 級事件繫結，以下是一個例子，這個例子說明了 overlay 的位置變化時在瀏覽器的控制檯輸出字串的例子。

// example overlay event binding
var overlay = new ol.Overlay({
    // ...
});
overlay.on("change:position", function(){
    console.log("位置改變！");
})

方法

      支援的方法這裡我們只介紹 overlay 特有的方法，就不介紹其繼承而來的方法了，主要是針對 overlay 的屬性及其相關聯物件的 get 和 set 方法。

• getElement，取得包含 overlay 的 DOM 元素；
• getId，取得 overlay 的 id；
• getMap，獲取與 overlay 關聯的 map物件；
• getOffset，獲取 offset 屬性；
• getPosition，獲取 position 屬性；
• getPositioning，獲取 positioning 屬性；
• setElement；設定 overlay 的 element；
• setMap，設定與 overlay 的 map 物件；
• setOffset，設定 offset；
• setPosition，設定 position 屬性；
• setPositioning，設定 positioning 屬性。

總結

利用 Overlay 可以做出很多很棒的效果，任何做出的 HTML 元素效果，都可以通過 overlay 新增到地圖之上，形成覆蓋物的效果，如在災害點放置動態點擴散效果的文章中實現的效果，以及點選地圖，在相應位置彈出資訊框，都是利用了 overlay 。

好的，就寫到這裡，有什麼問題，可以在文章下面留言。