Gis 之OpenLayers入门简介
Gis 之OpenLayers入门简介
OpenLayers（openlayers.org/）是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求。
API 文档： https://openlayers.org/en/latest/apidoc/
例子： https://openlayers.org/en/latest/examples/
要想在浏览器中显示交互式的地图很难，因为浏览器默认的只是显示静态的图片，如PNG、JPEG等格式，要交互式很难，因为每一个点击和缩放，地图都要做出正确的反应。
OpenLayers是一个JavaScript 类库包，主要是用于开发Web GIS客户端。这就是说，要先在网页中引用OpenLayers的JavaScript文件以及相应的css样式表和资源，根据其提供的功能接口，直接调用。所以关键是了解其提供的接口，这是使用一个类库的关键！如果想要优化相应的功能或者定制化，就要深入地了解其实现细节了，这需要有熟练的JavaScript功底。
OpenLayers支持Google Maps、Yahoo Map、微软Virtual Earth等资源，可以通过WMS服务调用其它服务器上的空间数据，通过WFS服务调用空间服务。在操作方面，OpenLayers 除了可以在浏览器中实现地图浏览的基本效果，如放大、缩小、平移等操作，进行选取面、选取线、要素选择、图层叠加等操作。
有如下特点：
- 支持任何XYZ瓦片资源，同时也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务
- 支持瓦片图层，来源OSM, Bing, MapBox, Stamen, MapQuest,或者其他 XYZ 数据源。支持 OGC 绘制服务， 以及非瓦块图层
- 可借助 WebGL, Canvas 2D, 等所有HTML5优势进行渲染. 直接用CSS控制map风格
- 支持矢量切片，包括pbf、GeoJSON、TopoJSON格式
- 支持矢量图层，能渲染GeoJSON、TopoJSON、KML、GML和其他格式的矢量数据
- 支持OGC制定的WMS、WFS等GIS网络服务规范
- 支持在移动设备上运行,构建轻量级自定义组件配置
- 可以通过css来为地图控件设置样式
- 面向对象开发方式，在OpenLayers中万物皆对象
Map、Layer、Source和View是OpenLayers框架体系中的核心类，几乎所有的动作都围绕这几个核心类展开，以实现地图的加载与其相关操作。
在OpenLayers的体系框架中：把整个地图看作一个容器（Map），核心为地图图层（Layer），每个图层有对应的数据源（Source），并且由地图视图（View）控制地图表现。地图容器上还支持一些与用户交互的控件（Control和Interaction），另外，OpenLayers还支持事件机制。
1）Target 属性：
首先，大家也注意到了，代码中，new 出的 map 对象要渲染到页面上，需要绑定一个容器，也就是代码注释的挂载点 target 属性，通过这个属性，地图就可以在 render 的时候，渲染到页面上，这里注意，你的容器要是不设置宽高的话，你的地图怕是看不到哟。
那么，target 到底可以接收什么样的参数？
来看，来自官方 API 的解释：
target **HTMLElement | string**
The container for the map, either the element itself or the id of the element. If not specified at construction time, module:ol/Map~Map#setTarget must be called for the map to be rendered.
明白了？简单的说就是要么给 target 传一个 HTMLElement，要么给它一个节点的 id。
2）layers 属性：
接下来，来看 map 对象属性 layers，它是 map 地图上要展示的图层，这个就牛批了。你所看到的地图或者地图上展示的点啊、线啊、或者其他花里胡哨的样式，都是源于 layers。
layers 接收的是一个 layer 集合，也就是一个数组。那么，一个重要的关系需要说明了：一个 map 对象对应多个 layer 图层，一个 layer 图层对应一个 source 资源。
所谓的 source，就是图层的资源。图层要展示内容，需要将要素 feature 添加到 source。
示例中的 layer 是一个瓦片图层（tileLayer），经常用到的图层类型还有 VectorLayer 和 ImageLayer。
当然，选择什么样的图层类型，也要结合实际应用以及后台提供的地图服务来决定。
不同类型的图层，拥有的属性也不完全相同，但有些常用的属性一致，比如：
- className（图层类名，常用来标识图层，可以作为图层过滤条件）；
- source（图层资源，存放图层展示的要素 feature）；
- visible（显示状态，可以用于图层切换控件，控制图层显示状态）；
- zIndex（图层渲染位置，控制图层显示的顺序，或者说多个图层叠加时，图层的位置）；
- extent（图层视角，控制地图展示的视角，[minx, miny, maxx, maxy]）等。
3）View 属性：
view 属性用来控制地图展示的中心位置、放大倍数 、坐标参考系、视角等属性。
示例代码只添加了 center 中心和 zoom 放大倍数两个参数。center 中的 fromLonLat() 方法用来转换投影坐标系。来看一个比较详细 view 示例：
view: new View({
// 地图中心经纬度坐标
center: [120.6, 36.2],
// 默认地图放大倍数
zoom: 28,
// 地图最小放大倍数
minZoom: 20,
// 地图最大放大倍数
maxZoom: 36,
// 投影坐标系，默认EPSG:'3857'
projection: new Projection({
code: 'EPSG:4326',
units: 'm',
}),
// 地图视角
extent: [119.9440044999051, 35.784494675002925, 121.2790759907966, 36.56676312669716],
}),
说明：地图的投影坐标系有很多，这里具体用什么参考坐标系，需要根据地图服务来定。
Map、View、controls、interaction 之间关系：
ol/Map
视图： getView、setView
图层： getLayers、getLayerGroup、addLayer、removeLayer、setLayers、setLayerGroup
控件： addControl、removeControl、getControls
交互： addInteraction、removeInteraction
DOM：getTarget、getTargetElement、setTarget
Map
主体地图对象 new Map()
controls类型
比例尺 ScaleLine
默认演示
new ScaleLine()
配置样式
new ScaleLine({bar: true,
minWidth: 128,
units: ‘metric’}),
