1. overlay 簡述

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

下面我們在看下官網(wǎng)的描述，其實(shí)map默認(rèn)是存在這個(gè)屬性，跟前面寫的文章，圖層，控件，交互都一個(gè)性質(zhì)，都是默認(rèn)加載地圖的情況下是允許設(shè)置默認(rèn)的overlay覆蓋物，也可以在某個(gè)事件或者方法觸發(fā)的時(shí)候去單獨(dú)添加覆蓋物。這里可以看下前面的文章描述，具體不進(jìn)行詳細(xì)闡述。

2. overlay 屬性

overlay初始化時(shí)可以接受很多的配置參數(shù)，這些配置參數(shù)是一個(gè)個(gè)的鍵值對，共同構(gòu)成一個(gè)對象字面量（options），然后傳遞給其“構(gòu)造函數(shù)”，如new ol.Overlay(options)，此處的 options 便是參數(shù)鍵值對構(gòu)成的對象字面量?？膳渲玫逆I值對，定義如下：(紅色為常用屬性)

• id，為對應(yīng)的 overlay 設(shè)置一個(gè) id，便于使用 ol.Map 的 getOverlayById 方法取得相應(yīng)的 overlay；
• element，overlay 包含的 DOM element；offset，偏移量，像素為單位，overlay 相對于放置位置（position）的偏移量，默認(rèn)值是 [0, 0]，正值分別向右和向下偏移；position，在地圖所在的坐標(biāo)系框架下，overlay 放置的位置；
• positioning，overlay 對于 position 的相對位置，可能的值包括 bottom-left、bottom-center、bottom-right 、center-left、center-center、center-right、top-left、top-center、top-right，默認(rèn)是 top-left，也就是 element 左上角與 position 重合；
• stopEvent，地圖的事件傳播是否停止，默認(rèn)是 true，即阻止傳播，可能不太好理解，舉個(gè)例子，當(dāng)鼠標(biāo)滾輪在地圖上滾動時(shí)，會觸發(fā)地圖縮放事件，如果在 overlay 之上滾動滾輪，并不會觸發(fā)縮放事件，如果想鼠標(biāo)在 overlay 之上也支持縮放，那么將該屬性設(shè)置為 false 即可；
• insertFirst，overlay 是否應(yīng)該先添加到其所在的容器（container），當(dāng) stopEvent 設(shè)置為 true 時(shí)，overlay 和 openlayers 的控件（controls）是放于一個(gè)容器的，此時(shí)將 insertFirst 設(shè)置為 true ，overlay 會首先添加到容器，這樣，overlay 默認(rèn)在控件的下一層（CSS z-index），所以，當(dāng) stopEvent 和insertFirst 都采用默認(rèn)值時(shí)，overlay 默認(rèn)在 控件的下一層
• autoPan，當(dāng)觸發(fā) overlay setPosition 方法時(shí)觸發(fā)，當(dāng) overlay 超出地圖邊界時(shí)，地圖自動移動，以保證 overlay 全部可見；
• autoPanAnimation，設(shè)置 autoPan 的效果動畫，參數(shù)類型是 olx.animation.panOptions
• autoPanMargin，地圖自動平移時(shí)，地圖邊緣與 overlay 的留白（空隙），單位是像素，默認(rèn)是 20像素；

后面案例中使用。

2. overlay 事件

支持的事件主要是繼承 ol.Object 而來的 change 事件，當(dāng) overlay 相關(guān)屬性或?qū)ο笞兓瘯r(shí)觸發(fā)：

• change，當(dāng)引用計(jì)數(shù)器增加時(shí)，觸發(fā)；
• change:element，overlay 對應(yīng)的 element 變化時(shí)觸發(fā)；
• change:map，overlay 對應(yīng)的 map 變化時(shí)觸發(fā)；
• change:offset，overlay 對應(yīng)的 offset 變化時(shí)觸發(fā)；
• change:position，overlay 對應(yīng)的 position 變化時(shí)觸發(fā)；
• change:positioning，overlay 對應(yīng)的 positioning 變化時(shí)觸發(fā)；
• propertychange，overlay 對應(yīng)的屬性變化時(shí)觸發(fā)；

那么怎么綁定相應(yīng)的事件呢？openlayers 綁定事件遵循一般的 dom 事件綁定規(guī)則，包括 DOM 2 級事件綁定，以下是一個(gè)例子，這個(gè)例子說明了 overlay 的位置變化時(shí)在瀏覽器的控制臺輸出字符串的例子。

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

4. overlay 方法

支持的方法這里我們只介紹 overlay 特有的方法，就不介紹其繼承而來的方法了，主要是針對 overlay 的屬性及其相關(guān)聯(lián)對象的 get和 set方法。

• getElement，取得包含 overlay 的 DOM 元素；
• getId，取得 overlay 的 id；
• getMap，獲取與 overlay 關(guān)聯(lián)的 map對象；
• getOffset，獲取 offset 屬性；
• getPosition，獲取 position 屬性；
• getPositioning，獲取 positioning 屬性；
• setElement；設(shè)置 overlay 的 element；
• setMap，設(shè)置與 overlay 的 map 對象；
• setOffset，設(shè)置 offset；
• setPosition，設(shè)置 position 屬性；
• setPositioning，設(shè)置 positioning 屬性。

5. 寫到最后

開篇我們提到了 overlay 有三種常見的用法 popup 彈窗、label標(biāo)注信息、text文本信息

詳細(xì)內(nèi)容參考此篇文章 openlayers6【八】地圖覆蓋物overlay三種常用用法 popup彈窗，marker標(biāo)注，text文本

到此這篇關(guān)于openlayers6之地圖覆蓋物overlay詳解的文章就介紹到這了,更多相關(guān)openlayer overlay地圖覆蓋內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論