OpenLayers繪製圖形
OpenLayers的顯示構成由外向內爲：html
- ol.Map：地圖對象。
- ol.layer.Vector：圖層對象layer。Map含有多個layer，最終的顯示效果是由多個layer疊加而成。
- ol.source.Vector和ol.style.Style：
一個layer由兩部分構成：數據源source和樣式style。其含義是，該layer下全部的圖形都使用一樣的繪製樣式。數組
- ol.source.Vector：數據源，提供該layer下全部的圖形信息。
- ol.style.Style：繪製樣式，爲該layer下全部的圖形共用。具體見後面ol.style.Style詳解。
- ol.Feature：要素，即圖形。一個source下含多個Feature。Feature是全部圖形的一個封裝，具體表明什麼圖形由內部的geometry參數決定。
- ol.geom.Geometry：具體圖形，決定了一個Feature具體表明什麼圖形。其類型有：
- ol.geom.Point：點。
- ol.geom.LineString：線。
- ol.geom.Circle：圓。
- ol.geom.LinearRing：線性環。
- ol.geom.MultiPoint：多點。
- ol.geom.MultiLineString：多線。
- ol.geom.MultiPolygon：多面。
- ol.geom.Polygon：多邊形。
其結構以下：
函數
所以，要繪製一個點，其過程爲：spa
- 調用new ol.geom.Point來建立一個geometry對象。
- 將geometry對象做爲屬性，調用new ol.Feature來建立一個Feature。
- 多個Feature構成一個features數組，做爲屬性，調用new ol.source.Vector來建立一個source。
- 調用new ol.style.Style來建立一個style。
- 將3和4中建立的source和style做爲屬性，調用來new ol.layer.Vector建立一個layer。
- 將layer做爲屬性，調用new ol.Map來建立Map。
若要清空一個layer的全部圖形，那麼獲取該layer的source，而後調用source.clear()便可。htm
ol.style.Style詳解對象
一個layer由兩部分構成：數據源source和樣式style。blog
其中，style即ol.style.Style，指明瞭各個類型的要素所使用的樣式。其屬性爲：圖片
- geometry：要素的屬性/要素/返回一個地理要素的函數，用來渲染成相應的地理要素。通常與image屬性配合使用，用於定義image要顯示的位置。
- fill：填充要素的樣式。只有一個color屬性。其格式爲：
color: 'rgba(255, 125, 125, 0.5)'it
- image：圖片樣式，類型爲 ol.style.Image，也可設置爲ol.style.Image的兩個派生類：ol.stylel.Circle和ol.style.Icon。然而，image屬性並不單單對圖片生效。默認image會對整個layer的要素生效。例如將image賦值爲ol.style.Circle，那麼point要素會渲染成一個圓。
- stroke：要素邊界樣式，類型爲 ol.style.Stroke。主要屬性爲color和width。
- text：要素文字的樣式，類型爲 ol.style.Text。主要配合ol.geom.Point在指定位置顯示文本。文本內容由ol.style.Text.text屬性控制。所以，若多個點共享同一個style，那麼這些點顯示的文本是相同的。若要每一個點顯示不一樣的文本，須要每一個Feature單獨設置本身的style。
- zIndex：z軸次序。用於layer的上下堆疊。
也就是說，一個ol.style.Style對象，是由多個ol.style.XXX組成。因此一個ol.style.Style對象就涵蓋了各個類型要素的顯示方式。class
所以，一個layer只須要設置一個ol.style.Style，而後該layer下的全部要素就會按ol.style.Style中定義的對應類型style來進行渲染，即
若很是肯定一個layer下不會顯示某些類型的要素，例如text，那麼能夠不爲ol.style.Style設置對應的屬性。
ol.style.Style是layer的全局屬性，對layer的全部要素生效。但每一個feature也能夠調用setStyle()來設置本身的style。
例如：
對一個ol.geom.Point而言，fill和stroke屬性是無效的，其最主要的style是image屬性。將image屬性設爲ol.stylel.Circle，則該點會顯示爲一個圓；將image屬性設爲ol.style.Icon，則該點會顯示爲一個圖標。
對一個ol.geom.Circle而言，最主要的style屬性是fill和stroke，這兩個屬性決定了圓的內部顏色和外側輪廓。而image屬性則是無效的。