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