openlayers 入门教程（四）：layers 篇

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

图层就像是含有文字或图形等元素的图片，一张张按顺序叠放在一起，组合起来形成页面的最终效果。

在 openlayers 中，图层是使用 layer 对象表示的，主要有 WebGLPoints Layer、热度图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer)和 矢量图层(Vector Layer)五种类型，它们都是继承 Layer 类的。

常用参数

source，指定了图层的数据来源，图层作用是以一定的样式渲染数据，source则指定了数据；
visible，是否可见；
zIndex，图层的叠加次序，默认是0，最底层，如果使用setMap方法添加的图层，zIndex值是Infinity，在最上层；
extent，图层渲染的区域，即浏览器窗口中可见的地图区域。extent 是一个矩形范围，格式是[number, number, number, number] 分别代表 [left, bottom, right, top] 。为了提升渲染效率和加载速度，extent范围之外的瓦片是不会请求的，当然也不会渲染；
className，图层各个元素的样式；
opacity，透明度，默认为 1 ，即完全透明；
minResolution，图层可见的最小分辨率；
maxResolution，图层可见的最大分辨率；
minZoom，图层可见的最小zoom level；
maxZoom，图层可见的最大zoom level

常用监听事件

• prerender 图层开始渲染之前。
• postrender 渲染完成之时。
• error 发生任何错误。
• change 图层发生修改。

OpenLayers中的图层类型

• Graticule，地图上覆盖的网格标尺图层。
• HeatMap，热力图。
• Vector，矢量图。
• VectorImage，单张的矢量图层。
• VectorTile，矢量瓦片图层。
• WebGLPoints，WebGL渲染的海量点图层。
• Tile，栅格图层。

按照渲染分类

图层按照渲染的位置分为两类，一类是在服务器端渲染好，以图片形式返回浏览器的， imagelayer 和 tilelayer 都是属于这种类型；另一类是在浏览器渲染的图层类型，vectorlayer 和 heatmaplayer 就是这种类型。

加载常用的地图底图

1 加载谷歌地图

示例：加载谷歌地图

2 加载OSM地图

示例：加载OSM地图

3 加载Bing地图

示例：加载Bing地图

4 加载Mapbox地图

示例：加载Mapbox地图

5 加载baidu地图

示例：加载baidu地图

6 加载Arcgis地图

示例： 加载Arcgis地图

7 加载高德地图

示例： 加载高德地图

8 加载天地图

示例：加载天地图