OpenLayers3基礎教程——OL3基本概念

從本節開始，我會陸陸續續的更新有關OL3的相關文章——OpenLayers3基礎教程，歡迎大家關注我的博客，同時也希望我的博客能夠給大家帶來一點幫助。

概述：

OpenLayers 3對OpenLayers網絡地圖庫進行了根本的重新設計。版本2雖然被廣泛使用，但從JavaScript開發的早期發展階段開始，已日益現實出它的落後。 OL3已運用現代的設計模式從底層重寫。OpenLayers 3同時設計了一些主要的新功能，如顯示三維地圖，或使用WebGL快速顯示大型矢量數據集，這些功能將在以後的版本中加入。

基本概念：

OL3結構圖

1、Map

OpenLayers 3的核心部件是Map（ol.Map）。它被呈現到對象target容器（例如，包含在地圖的網頁上的div元素）。所有地圖的屬性可以在構造時進行配置，或者通過使用setter方法，如setTarget（）。

<div id="map" style="width: 100%, height: 400px"></div>
<script>
    var map = new ol.Map({target: 'map'});
</script>

2、View

ol. View負責地圖的中心點，放大，投影之類的設置。

一個ol.View實例包含投影projection，該投影決定中心center 的座標系以及分辨率的單位，如果沒有指定（如下面的代碼段），默認的投影是球墨卡託（EPSG：3857），以米爲地圖單位。

放大zoom 選項是一種方便的方式來指定地圖的分辨率，可用的縮放級別由maxZoom （默認值爲28）、zoomFactor （默認值爲2）、maxResolution （默認由投影在256×256像素瓦片的有效成都來計算） 決定。起始於縮放級別0，以每像素maxResolution 的單位爲分辨率，後續的縮放級別是通過zoomFactor區分之前的縮放級別的分辨率來計算的，直到縮放級別達到maxZoom 。

map.setView(new ol.View({
    center: [0, 0],
    zoom: 2
}));

3、Source

OpenLayers 3使用ol.source.Source子類獲取遠程數據圖層，包含免費的和商業的地圖瓦片服務，如OpenStreetMap、Bing、OGC資源（WMS或WMTS）、矢量數據（GeoJSON格式、KML格式…）等。

var osmSource = new ol.source.OSM();

4、Layer

一個圖層是資源中數據的可視化顯示，OpenLayers 3包含三種基本圖層類型：ol.layer.Tile、ol.layer.Image 和 ol.layer.Vector。

ol.layer.Tile 用於顯示瓦片資源，這些瓦片提供了預渲染，並且由特定分別率的縮放級別組織的瓦片圖片網格組成。

ol.layer.Image用於顯示支持渲染服務的圖片，這些圖片可用於任意範圍和分辨率。

ol.layer.Vector用於顯示在客戶端渲染的矢量數據。

var osmLayer = new ol.layer.Tile({source: osmSource});
map.addLayer(osmLayer);

總結：

上述片段可以合併成一個自包含視圖和圖層的地圖配置：

<div id="map" style="width: 100%, height: 400px"></div>
<script>
  new ol.Map({
    layers: [
      new ol.layer.Tile({source: new ol.source.OSM()})
    ],
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    }),
    target: 'map'
  });
</script>