openLayers3 中實現多個Overlay

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

其實實現多個就是創建多個div,然后給每個div綁定Overlay。

//頁面加載完函數 --顯示個關鍵點的名稱
       window.onload = function (){
            var pointfeatures = vectorLayerPoint.getSource().getFeatures();//獲取點關鍵點圖層的所有點信息
            //遍歷每個點
            for(var i=0;i<pointfeatures.length;i++){
                //新增放置overly的div
                $("#overly").after("<div id = 'overly"+i+"' class = 'overlay'>"+pointfeatures[i].get('pointtype')+"</div>");
                //新增overly
                var marker= new ol.Overlay({
                    //overly的位置[11,22]格式
                    position:pointfeatures[i].getGeometry().getCoordinates(),
                    //overly放置的div
                    element: document.getElementById('overly'+i)            
                });
                //逐個把overly添加到地圖上
                map.addOverlay(marker);
            }
                            
        }