OpenLayers3 學習-1

OpenLayers3 學習-1-簡介

---

OpenLayers3（OL3）對OL2進行了從新設計和實現，支持多種格式的商業和免費的地圖數據源。將來的版本將包括顯示3D地圖或利用WebGL進行大規模矢量數據的展現的功能。

OL3基於Google的 Closure Tools，大量應用了Closure Library中的內容。

OL3利用了Canvas, DOM和WebGL來實現數據渲染。所以，IE9如下的瀏覽器是不支持的。OL3的設計目標是可以在桌面/平板和移動設備上都能應用。
　　
OL3應用了和Closure library相似的對象層次結構。頂層是ol命名空間（即 var ol={}）. 其下又分爲幾類：

1. 更深一層的命名空間： 如ol.layers,以小寫字母開頭；
2. 包含靜態屬性和方法的簡單對象，如ol.animation，一樣以小寫字母開頭；
3. 類型（types）以大寫字母開頭。他們主要是一些類，即擁有構造函數，如ol.Map,ol.layer.Vector。也有一些是簡單類型，如數組類型的ol.Extent.

類命名空間，如ol.layer,擁有同名的基本類類型，如ol.layer.Layer，主要是用於給其餘類繼承的抽象類。
　
OL3的源碼的組織方式和命名空間相似，如ol/layer/vectorlayer.js.

---

參考：
http://openlayers.org/en/latest/doc/tutorials/introduction.html

---

OpenLayers3 學習-1-基本概念

Map - 地圖

OL3的核心組件是地圖（ol.map）.他被渲染到 target容器（即一個在頁面上包含地圖的div）。全部的地圖屬性能夠在建立地圖時設置，或是使用 setter 方法，如setTarget()。

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

View - 視圖

ol.Map不負責地圖的中心點、縮放和投影屬性設置，它們是ol.View的實例的屬性。

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

ol.View同時擁有projection屬性。投影決定了座標系統的中心（center）和地圖分辨率的計算單位。OL3默認的投影是球形墨卡託（Spherical Mercator，EPSG:3857），單位爲 米。

zoom屬性是一個設定地圖分辨率的便捷的方法。可用的縮放級別由maxZoom（默認28）、zoomFactor（默認2）和maxResolution（默認值根據投影的有效範圍適應256X256像素的瓦片來計算）。0級時分辨率是每像素maxResolution個單元，縮放時根據zoomFactor計算，直到maxZoom。

Source - 源

OL3利用ol.source.Source子類來加載遠程數據。商業地圖服務源如OpenStreetMap、Bing，以及OGC規範源如WMS、WMTS，以及矢量數據如GeoJSON、KML都是能夠使用的。

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

Layer - 圖層

layer 是source數據的可視化表達。OL3 有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>

---

參考：
http://openlayers.org/en/latest/doc/tutorials/concepts.html