1.初識openlayers

 // 建立地圖
      new ol.Map({
            // 設定地圖圖層
            layers: [
              // 建立一個使用Open Street Map地圖源的瓦片圖層
              new ol.layer.Tile({source: new ol.source.OSM()})
            ],
            // 設定顯示地圖的檢視
            view: new ol.View({
              center: [0, 0],    // 定義地圖顯示中心於經度0度，緯度0度處
              zoom: 2            // 並且定義地圖顯示層級為2
            }),
            // 讓id為map的div作為地圖的容器
            target: 'map'    
        });
   地圖主要是由layer和view組成，layer可以有多個，view只能有一個。 
 

2.openlayers 詳解

地圖所有組成部分：
    1.Map(地圖)  2.view(檢視) 3.圖層(Layer) 4.資料來源(Source) 5.控制元件(Control) 6.互動(Interaction)
    map地圖容器初始化，view控制地圖中心位置，範圍，層級,layer可以有多個圖層，互不干擾，
    source資料來源與圖層一一對應密不可分，可以是靜態圖或者瓦片圖；也可以是柵格化的或者向量，
    control處於地圖的最上層,用於操控地圖，例如放大縮小，互動(Interaction)用於使用者與地圖間的互動操作

3.openlayers常用方法

ol.proj.transform 座標轉換 
ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')就能把EPSG:4326的座標[104.06, 30.67]轉換為EPSG:3857的座標。這裡涉及座標系與投影的概念，這裡簡單介紹一下，OpenLayers 3支援兩種投影，一個是EPSG:4326，等同於WGS84座標系，另一個是EPSG:3857，等同於900913，由Mercator投影而來，經常用於web地圖，一個是全球通用的，一個是web地圖專用的，OpenLayers預設使用的是EPSG:3857，如果需要使用4326 ol.view.projection 來設定

setZoom 設定縮放級別
getView 獲取檢視
getCenter setCenter 設定獲取中心點
ol.Coordinate 獲取座標
ol.map.view.extent: [102, 29, 104, 31]  型別為：[minX, minY, maxX, maxY] 限定地圖範圍
minZoom: 10  設定最小縮小級別
maxZoom: 14  設定最大放大級別
 

3.深入瞭解openlayers

Source和Layer是一對一的關係，有一個Source，必然需要一個Layer，然後把這個Layer新增到Map上,
歸納起來共三種：ol.source.Tile(瓦片資料來源)，ol.source.Image(一整張圖)和ol.source.Vector(向量地圖源),點，線，面等等常用的地圖元素(Feature)都包含在Vector中，程式碼如下

new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: '../data/geojson/line-samples.geojson',     // 地圖來源
                    format: new ol.format.GeoJSON()    // 解析向量地圖的格式化類
                })
            })

 設定樣式
style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                size: 1
            })
        })

新增圓
var circle = new ol.Feature({
      geometry: new ol.geom.Point([0, 0])
  });

overlayer 覆蓋物，一般為圖片
var anchor = new ol.Overlay({//定義覆蓋物
    element: document.getElementById('anchor')
  });
anchor.setPosition([104, 30]);//設定位置
map.addOverlay(anchor);//新增到地圖上

draw 標註點，往往與Interaction一起使用


補充：瓦片就是渲染後的圖片，按照一定的規則結合比例尺切成小的圖片，一種是柵格地圖瓦片，一種是向量地圖瓦片。openlayer 屬於前者，**柵格地圖瓦片**，**優點**：顯示效率高，方便傳輸，**缺點**:佔用伺服器空間,無法完成像旋轉，偽三維等互動顯示功能,資料保密性差，死板，**向量地圖瓦片**，**優點**：極少佔用伺服器空間，可以實現有效的地圖互動顯示功能，可以形成豐富的配色，對於Cartographic，資料保密性強，靈活。 **缺點**：技術成熟度較差，以前的資源不通用