openlayers6之地圖覆蓋物overlay詳解

Posted on by

1. overlay 簡述

overlay是覆蓋物的意思，顧名思義就是在地圖上以另外一種形式浮現在地圖上，這裡很多同學會跟圖層layers搞混淆，主要是放置一些和地圖位置相關的元素，常見的地圖覆蓋物為這三種類型，如：popup 彈窗、label標註信息、text文本信息等，而這些覆蓋物都是和html中的element等價的，通過overlay的屬性element和html元素綁定同時設定坐標參數——達到將html元素放到地圖上的位置，在平移縮放的時候html元素也會隨著地圖的移動而移動。

下面我們在看下官網的描述，其實map默認是存在這個屬性，跟前面寫的文章，圖層，控件，交互都一個性質，都是默認加載地圖的情況下是允許設置默認的overlay覆蓋物，也可以在某個事件或者方法觸發的時候去單獨添加覆蓋物。這裡可以看下前面的文章描述，具體不進行詳細闡述。

在這裡插入圖片描述

2. overlay 屬性

overlay初始化時可以接受很多的配置參數，這些配置參數是一個個的鍵值對，共同構成一個對象字面量（options），然後傳遞給其“構造函數”，如new ol.Overlay(options)，此處的 options 便是參數鍵值對構成的對象字面量。可配置的鍵值對，定義如下：(紅色為常用屬性)

  • 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像素；

後面案例中使用。

2. overlay 事件

支持的事件主要是繼承 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 的位置變化時在瀏覽器的控制臺輸出字符串的例子。

var overlay = new ol.Overlay({
    // 創建 overlay ...省略
});
// 事件
overlay.on("change:position", function(){
    console.log("位置改變！");
})

4. overlay 方法

支持的方法這裡我們隻介紹 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 屬性。

5. 寫到最後

開篇我們提到瞭 overlay 有三種常見的用法 popup 彈窗、label標註信息、text文本信息

詳細內容參考此篇文章 openlayers6【八】地圖覆蓋物overlay三種常用用法 popup彈窗，marker標註，text文本

到此這篇關於openlayers6之地圖覆蓋物overlay詳解的文章就介紹到這瞭,更多相關openlayer overlay地圖覆蓋內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：