OpenLayers官方示例詳解十三之疊置層（Overlay）
阿新 • • 發佈：2018-12-28
目錄
一、示例簡介
這個示例展示瞭如何使用疊置層（ol.Overlay）。
這個示例藉助了第三方庫jQuery和Bootstrap。
二、程式碼詳解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Overlay</title> <link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" /> <script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> #marker { width: 20px; height: 20px; border: 1px solid #088; border-radius: 10px; background-color: #0FF; opacity: 0.5; } #vienna { text-decoration: none; color: white; font-size: 11pt; font-weight: bold; text-shadow: black 0.1em 0.1em 0.2em; } .popover-content { min-width: 180px; } </style> </head> <body> <div id="map"></div> <div > <!-- 關於維也納資訊的點選標籤 --> <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a> <div id="marker" title="Marker"></div> <!-- 彈窗 --> <div id="popup" title="Welcome to OpenLayers"></div> </div> <script> var layer = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ target: 'map', layers: [ layer ], view: new ol.View({ center: [0, 0], zoom: 2 }) }); var pos = ol.proj.fromLonLat([16.3725, 48.208889]); // 用於充當維也納標記的疊置層 var marker = new ol.Overlay({ element: document.getElementById('marker'), position: pos, positioning: 'center-center', // 是否要阻止事件冒泡到地圖視口(map viewport)。 // 如果設定為ture，那麼疊置層被放在裝載控制元件的那個div容器中（該div容器css類名為ol-overlaycontainer-stopevent） // 如果設定為false，那麼疊置層被放在css類名為ol-overlaycontainer的div容器下，由className屬性（預設為'ol-overlay-container ol-selectable'）指定類名的div容器中 stopEvent: false }); map.addOverlay(marker); // 將疊置層新增到地圖 // 用於充當維也納標籤的疊置層 var vienna = new ol.Overlay({ element: document.getElementById('vienna'), position: pos }); map.addOverlay(vienna); // 使用者點選地圖就會彈出來的彈窗 var popup = new ol.Overlay({ element: document.getElementById('popup') }); map.addOverlay(popup); // 為地圖繫結click事件，使使用者點選地圖就能在對應處彈窗 map.on('click', function(evt){ var element = popup.getElement(); // 獲取充當彈窗的DOM元素 var coordinate = evt.coordinate; // 獲取滑鼠點選處的座標 // 將地理座標格式化為半球、度、分和秒的形式 var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate)); $(element).popover('destroy'); popup.setPosition(coordinate); // 將彈窗位置設定為滑鼠點選處 $(element).popover({ placement: 'top', animation: false, html: true, content: '<p>The location you clicked was:</p><code>' + hdms + '</code>' }); $(element).popover('show'); }); </script> </body> </html>
這裡要特別說明一下OpenLayers中關於DOM元素的組織關係：
當呼叫ol.Map()這個建構函式時，OpenLayers地圖引擎會在內部建立一個視口容器（viewport container，一個css類名為ol-viewport的div DOM元素）並將其放置在target屬性對映的地圖容器元素中。
而在視口容器中將會包含三個子元素：
- canvas元素 —— 用於渲染地圖
- css類名為ol-overlaycontainer-stopevent的div元素 —— 用於承載控制元件（control）和stopEvent屬性設定為true的疊置層（overlay)，此處的DOM元素事件不冒泡
- css類名為ol-overlaycontainer —— 用於承載stopEvent屬性設定為false的疊置層，此處的DOM元素事件會冒泡
所以上面示例中用於充當疊置層的html元素都會被移到用於承載疊置層的div元素中。
所以OpenLayers的DOM元素組織結構為：
