介绍：开源的Web GIS引擎，使用了JavaScript、最新的HTML5技术及CSS技术，支持dom，canvas和webgl三种渲染方式。除了支持网页端，还支持移动端。在地图数据源方面，支持各种类型的瓦片地图，既支持在线的，也支持离线的。比如OSM, Bing, MapBox, Stamen, MapQuest等等；还支持各种矢量地图，比如GeoJSON，TopoJSON，KML，GML等等。随着OpenLayers 3的进一步发展，将支持更多的地图类型。

面向对象编程
包管理方式
驼峰命名，变量小驼峰，类名大驼峰

地图组成部分：
（1）地图 Map ol.Map
（2）视图View ol.View 控制地图显示的中心位置、范围、层级
（3）图层Layer 提供了多种多样用于不同业务的图层，每一种图层在实现上都对应于一个类，放在包ol.layer下面
（4）数据源Source ol/source 它和图层一一对应，提供不同的数据源，每种都有具体的类，放在ol.source下
（6）控件Control 为用户提供了和地图交互的入口。 针对不同的用途，具有不同的控件。在包ol.control下面，控件具备相同的一个特性，就是一直保持在地图的某个固定位置，不会随着地图移动而移动，也不会随着地图放大缩小而变化，一直处于地图的最上层。控件最初添加到地图。如果未指定，则使用defaults
（7）交互Interaction：理解所有控件都在它下，要不也实现不了放大缩小等功能

注意：
1、有关坐标转换的包都在ol/proj中 （例如经纬度等的转化）

OpenLayers3 地图实例

  // 地图容器

具体讲解：
1、Map:实例化地图，配置图层数据、视图、控件及绑定元素，还提供了一些api
2、View:视图，定义map展示的中心点、层级、范围还可以通过api获取到动态设置（实现移动方法缩小），提供了很多属性和方法(可以获取到设置的属性值等)

view: new View({center: fromLonLat([defaultOptions.center.lon, defaultOptions.center.lat]), // 中心坐标zoom: defaultOptions.defaultZoom, // 未定义分辨率时使用，计算初始视图的缩放级别minZoom: defaultOptions.minZoom, // 最小缩放级别maxZoom: defaultOptions.maxZoom,  // 最大缩放级别constrainResolution: true, // 如果为真，视图将在交互后始终动画到最近的缩放级别projection: 'EPSG:4326', // 设置使用EPSG:4326投影，默认EPSG:3857经常用于web地图，投影是为了让立体展示在平面图extent: [102, 29, 104, 31], // 限制地图中心显示范围，例如最大最小经纬度。但缩小还是会显示这个范围外的内容}),

3、Source和Layer 图层和数据源,一一对应关系，有一个source就有一个layer,然后将layer添加到map上显示出来，是源数据的可视化表示形式

import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'; 

（1）ol/layer/Tile：瓦片图层——平铺-渲染网格中提供平铺图像的源，网格按特定分辨率的缩放级别组织。
（2）ol/layer/Image：图像——渲染以任意范围和分辨率提供地图图像的源。
（3）ol/layer/Vector：矢量图层——在客户端呈现向量数据。
（4）ol/layer/VectorTile：矢量瓦片——作为矢量分幅提供的数据呈现。

import { XYZ, Vector as VectorSource } from 'ol/source'; 

（1）ol.source.Tile 对应的是瓦片数据源，现在网页地图服务中，绝大多数都是使用的瓦片地图
（2）ol.source.Image 对应的是一整张图，而不像瓦片那样很多张图，从而无需切片，也可以加载一些地图
（3）ol.source.Vector 对应的是矢量地图源，点，线，面等等常用的地图元素(Feature)，就囊括到这里面了

4、功能要素feature 在ol/Feature上，地理特征的矢量对象，可以单独设置样式（地图上的功能段）。即地图上的几何对象，包括点（Point），线（LineString）,多边形（Polygon），圆（Circle）， layer（图层），就像是含有点、线、面、文字、图片的玻璃板

import Feature, { FeatureLike } from 'ol/Feature';
// 例如添加点// 已添加至map上的图层配置中var pointLayer = new ol.layer.Vector({source: new ol.source.Vector()});var circle = new ol.Feature({geometry: new ol.geom.Point([0, 0])});circle.setStyle(new ol.style.Style({image: new ol.style.Circle({radius: 10,stroke: new ol.style.Stroke({color: 'blue',size: 1})})}));circleLayer.getSource().addFeature(circle);

样式设置：
（1）改feature设置样式或给layer设置样式

// 方式1 改layer设置样式var vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({url: '../data/geojson/line-samples.geojson', format: new ol.format.GeoJSON()}),// 设置样式，颜色为红色，线条粗细为1个像素style: new ol.style.Style({stroke: new ol.style.Stroke({color: 'red',size: 1})})});map.addLayer(vectorLayer);// 给feture设置样式
如果要在feature上设置样式，就必须先获取到所有加载的feature，然后依次设置，显然直接设置layer的样式，会在代码编写上更容易一些

5、LOD及分辨率
lod：根据不同的放大缩小呈现不同层级的底图
瓦片计算
获取层级及分辨率

6、图标及提示信息：比如在地图上标注饭店，学校，加油站等，就需要添加图标，点击图标，可能需要提示更为详细的信息

添加图标的两种方式：（1）overlay （2）feature+style

// overlay实现往地图添加图标
import Overlay from 'ol/Overlay'// 下面把上面的图标附加到地图上，需要一个ol.Overlay
var anchor = new ol.Overlay({element: document.getElementById('anchor')});// 关键的一点，需要设置附加到地图上的位置anchor.setPosition([104, 30]);// 然后添加到map上map.addOverlay(anchor);// overlay+css实现动画图标
通过给img设置样式动画实现

// feature+style实现在地图上添加图标，需要矢量图层放置图标
// 我们需要一个vector的layer来放置图标var layer = new ol.layer.Vector({source: new ol.source.Vector()})var map = new ol.Map({layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layer],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [104, 30],zoom: 10})});// 创建一个Feature，并设置好在地图上的位置var anchor = new ol.Feature({geometry: new ol.geom.Point([104, 30])});// 设置样式，在样式中就可以设置图标anchor.setStyle(new ol.style.Style({image: new ol.style.Icon({src: '../img/anchor.png'anchor: [0.5, 1]    // 设置图标位置})}));// 添加到之前的创建的layer中去layer.getSource().addFeature(anchor);// 根据层级放大缩小图标，不设置是不随放大缩小图标不进行放大缩小// 监听地图层级变化map.getView().on('change:resolution', function(){var style = anchor.getStyle();// 重新设置图标的缩放率，基于层级10来做缩放style.getImage().setScale(this.getZoom() / 10);anchor.setStyle(style);})

7、事件：监听、注销、常用事件
8、交互Interaction：例如拖动等
（1）内置交互方式在ol.interaction下，例如放大、缩小、平移

9、控件control:在地图固定的位置，不会随着地图放大缩小而变化

import { FullScreen, ScaleLine, defaults } from 'ol/control';