入门基础（一）基本概念

什么是 OpenLayer

1、OpenLayers 是一个开源的JavaScript类库，主要是用于开发Web GIS客户端。要想完整的开发一个地图项目，还需要后端提供地图瓦片的服务，如可以使用geoserver等。
2、它可以轻松地在任何网页中放置动态地图。且能支持移动设备。
3、它可以显示从任何来源加载的地图图块、矢量数据和标记。
4、它易于定制和扩展，能通过简单的 CSS 设置地图控件的样式。使用第三方库来自定义和扩展功能。

基本概念

OpenLayers将抽象事物具体化为类，其核心类是Map、Layer、Source、View，几乎所有的动作都围绕这个核心类展开，从而实现地图加载和相关操作。

1、Map

OpenLayers 的核心部件是 Map（ol.Map）。它被呈现到对象 target 容器（例如，网页上的 div 元素）。所有地图的属性可以在构造时进行配置，或者通过使用 setter 方法，如 setTarget()

<div id="map"></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 。
拓展一：地理空间数据可能来自各种坐标参照系，一个数据集可能是以度为单位的地理（经纬）坐标系，另一个可能是以米为单位的投影坐标系。由于一个地方的地理坐标相对来说更容易知道，使用 ol.proj.transform 方法将地理坐标系（"EPSG:4326"）转化为墨卡托坐标系（"EPSG:3857"）。

view: new ol.View({
    center: ol.proj.transform([-93.27, 44.98], 'EPSG:4326', 'EPSG:3857'),
    zoom:9
})

3、Source

OpenLayers 使用 ol.source.Source 子类获取远程数据图层，包含免费的和商业的地图瓦片服务，如 OpenStreetMap、Bing、OGC 资源（WMS 与 WMTS）、矢量数据（GeoJSON 格式、 KML 格式…）等。
当资源(source)与地图视图(view)的坐标系相同时，无需再次设置投影projection（默认与view坐标系一致），只有在资源与视图的投影不同的情况下，才需要在资源中明确指定 projection 属性来表示要素缓存的投影

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

4、Layer

一个图层是资源中数据的可视化显示，OpenLayers 包含几种基本图层类型：
- ol.layer.Tile 用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分辨率的缩放级别组织的瓦片图片网格组成。
- ol.layer.Image 用于显示支持渲染服务的图片，这些图片可用于任意范围和分辨率。
- ol.layer.Vector 用于显示在客户端渲染的矢量数据。
- ol.layer.VectorTile 用于显示在客户端渲染的矢量瓦片数据。
- ol.layer.WebGLTile 用于提供预渲染、平铺的瓦片图像，按特定分辨率的缩放级别组织。

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

map.addLayer(osmLayer);

5、control

控件，使用按钮来控制地图。
在ol/control下，定义了一些内置的控件。如全屏、旋转、缩放、小地图等。
在内置控件不满足需求时也需要我们自定义控件。

6、interaction

交互事件，添加地图和用户的交互事件。

7、总结

上述片段可以合并成一个自包含视图和图层的地图配置：

<div id="map"></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>

地图源（天地图为例）

需要申请token http://lbs.tianditu.gov.cn/home.html
图层服务地址 http://lbs.tianditu.gov.cn/server/MapService.html

// 地图类型标识

vec: 矢量底图=Vector
cva: 矢量注记图层（中文）=Chinese Vector Annotation
xxx_w：球面墨卡托投影
xxx_c：经纬度投影（经纬度直投）