openLayers3 中實現多個Overlay

此篇的目的是為了記錄下用Overlay的一些操作。

其實實現多個就是建立多個div,然後給每個div繫結Overlay。

 1 //頁面載入完函式 --顯示個關鍵點的
 2        window.onload = function (){
 3             var pointfeatures = vectorLayerPoint.getSource().getFeatures();//獲取點關鍵點圖層的所有點資訊
 4             //遍歷每個點
 5             for(var i=0;i<pointfeatures.length;i++){
 6                 //新增放置overly的div
 7                 $("#overly").after("<div id = 'overly"+i+"' class = 'overlay'>"+pointfeatures[i].get('pointtype')+"</div>");
 8                 //新增overly
 9                 var marker= new ol.Overlay({
10                     //overly的位置[11,22]格式
11                     position:pointfeatures[i].getGeometry().getCoordinates(),
12                     //overly放置的div
13                     element: document.getElementById('overly'+i)            
14                 });
15                 //逐個把overly新增到地圖上
16                 map.addOverlay(marker);
17             }
18                             
19         }