OpenLayers3 学习-0-简介

OpenLayers 3 is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).

OpenLayers 3是一个高性能、功能强大的在网络上创建交互式地图的Javascript库。它可以在任何网页上显示来源于任何数据源的地图瓦片,矢量数据和地图标记。OpenLayers被开发用于促进各种地理信息的使用。它是完全免费的,开源的JavaScript, 基于FreeBSD许可。

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.

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