openLayers6系列理论基础——Layer篇

openLayers6系列理论基础——Layer篇

一、Layer介绍

        Layer是Map的核心组成部分，ol定义了四种基本的图层类型，分别是分别是Tile（瓦片）、Image（图片）、Vector（矢量）、VectorTile（矢量切片），这四种类有一个共同的基类Layer，它们的大多数属性和方法都继承自这个类。

        其主要使用流程就是先设置相关参数创建，然后添加到map中即可。

二、Layer主要属性

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

三、Layer主要方法

• getLayersArray()，得到所有图层；
• getLayerStatesArray()，得到所有图层状态；
• getSource()，得到相应图层的来源；
• getSourceState()，得到相应图层的来源状态；
• setSource()，设置图层 source 属性，参数为一个 source 对象；
• setMap()，添加Layer到Map,并由Map管理。

四、Layer按功能分类

Layer按照功能分类的话，可以理解为基础图层（baselayer）和叠加图层（overlay layer）。

• 基础图层：最底层的图层，其他图层都在他之上，最先增加的图层默认是base layer
• overlay layer：不是baselayer，后面添加的都是叠加图层

五、layer按类别分类

5.1 瓦片数据Tile/TileLayer

使用：

var layer=new ol.layer.Tile({
        source: new ol.source.OSM(),
        visible:true,
        opacity:0.8,
        zIndex: 1
    })

常用options选项：

名称	类型	描述
options	名称 类型 描述 className 字符串 （默认为“ ol-layer”） 设置为layer元素的CSS类名称。 opacity 数字 （默认为1） 不透明度（0，1）。 visible 布尔值 （默认为true） 能见度。 extent 模块：ol /范围〜范围 图层渲染的边界范围。该图层不会在此范围之外渲染。 zIndex 数 图层渲染的Z索引。在渲染时，将首先按Z-index然后按位置对图层进行排序。当时undefined，zIndex对于添加到地图layers集合中Infinity的图层或使用该图层的setMap() 方法时，假设a 为0 。 minResolution 数 该层可见的最低分辨率（含）。 maxResolution 数 在该层以下可见的最大分辨率（不包括）。 minZoom 数 最小视图缩放级别（不包括此级别），在该级别之上，该层将可见。 maxZoom 数 该图层可见的最大视图缩放级别（包括该级别）。 preload 数字 （默认为0） 预加载。加载低分辨率图块，直至达到preload级别。0 表示没有预加载。 source 模块：ol / source / Tile〜TileSource 该层的来源。 map 模块：ol / PluggableMap〜PluggableMap 将图层设置为地图上的叠加层。地图将不在其图层集合中管理该图层，并且该图层将呈现在顶部。这对于临时层很有用。在地图上添加图层并由地图管理图层的标准方法是使用module:ol/Map#addLayer。 useInterimTilesOnError 布尔值 （默认为true） 出现错误时使用临时磁贴。

5.2 图片数据Image/ImageLayer

1、ol可以将网络或者本地的图片加载到网页中。

2、加载一个图片必须两个参数，一个是extent、另一个是projection。

使用：

var extent=[-1834184.237800,2231702.381200,-672568.125000,2845554.176000]
var proj=new ol.proj.Projection({
        code:'EPSG:102025',
        extent:extent
 })
var  layer= new ol.layer.Image(
                {
                    source:new ol.source.ImageStatic({
                        url:'../img/2015.jpg',
                        projection:proj,
                        imageExtent: extent
                    })
                }
            )

常用options：

名称	类型	描述
options	图层选项。 名称 类型 描述 className 字符串 （默认为“ ol-layer”） 设置为layer元素的CSS类名称。 opacity 数字 （默认为1） 不透明度（0，1）。 visible 布尔值 （默认为true） 能见度。 extent 模块：ol /范围〜范围 图层渲染的边界范围。该图层不会在此范围之外渲染。 zIndex 数 图层渲染的Z索引。在渲染时，将首先按Z-index然后按位置对图层进行排序。当时undefined，zIndex对于添加到地图layers集合中Infinity的图层或使用该图层的setMap() 方法时，假设a 为0 。 minResolution 数 该层可见的最低分辨率（含）。 maxResolution 数 在该层以下可见的最大分辨率（不包括）。 minZoom 数 最小视图缩放级别（不包括此级别），在该级别之上，该层将可见。 maxZoom 数 该图层可见的最大视图缩放级别（包括该级别）。 map 模块：ol / PluggableMap〜PluggableMap 将图层设置为地图上的叠加层。地图将不在其图层集合中管理该图层，并且该图层将呈现在顶部。这对于临时层很有用。在地图上添加图层并由地图管理图层的标准方法是使用module:ol/Map#addLayer。 source 模块：ol / source / Image〜ImageSource 该层的来源。

5.3 矢量数据Vector/VectorLayer

Ol加载矢量数据需要转换成geojson形式，以shp数据为例，先将数据转换成geojson格式，

常用options：

名称	类型	描述
options	选项。 名称 类型 描述 className 字符串 （默认为“ ol-layer”） 设置为layer元素的CSS类名称。 opacity 数字 （默认为1） 不透明度（0，1）。 visible 布尔值 （默认为true） 能见度。 extent 模块：ol /范围〜范围 图层渲染的边界范围。该图层不会在此范围之外渲染。 zIndex 数 图层渲染的Z索引。在渲染时，将首先按Z-index然后按位置对图层进行排序。当时undefined，zIndex对于添加到地图layers集合中Infinity的图层或使用该图层的setMap() 方法时，假设a 为0 。 minResolution 数 该层可见的最低分辨率（含）。 maxResolution 数 在该层以下可见的最大分辨率（不包括）。 minZoom 数 最小视图缩放级别（不包括此级别），在该级别之上，该层将可见。 maxZoom 数 该图层可见的最大视图缩放级别（包括该级别）。 renderOrder 模块：ol / render〜OrderFunction 渲染顺序。在渲染之前对要素进行排序时使用的函数。默认情况下，要素是按照创建顺序绘制的。使用 null避免排序，但得到一个未定义的绘制顺序。 renderBuffer 数字 （默认为100） 从矢量源获取特征以进行渲染或命中检测时，渲染器使用的视口范围周围的像素缓冲区（以像素为单位）。推荐值：最大符号，线宽或标签的大小。 source 模块：ol / source / Vector〜VectorSource 资源。 map 模块：ol / PluggableMap〜PluggableMap 将图层设置为地图上的叠加层。地图将不在其图层集合中管理该图层，并且该图层将呈现在顶部。这对于临时层很有用。在地图上添加图层并由地图管理图层的标准方法是使用module:ol/Map#addLayer。 declutter 布尔值 （默认为false） 整理图像和文字。将已设置为的所有Vector和VectorTile图层的所有图像和文本样式都应用去毛刺true。优先级由图层的z-index，zIndex样式的样式和要素的渲染顺序定义。z索引越高，优先级越高。在同一z索引内，在另一个特征之前渲染的特征具有更高的优先级。 style 模块：ol / style / Style〜StyleLike 图层样式，颜色形状等。请参阅 module:ol/style以获取默认样式，如果未定义，将使用默认样式。 updateWhileAnimating 布尔值 （默认为false） 设置true为时，将在动画过程中重新创建功能批次。这意味着将不会显示任何裁剪的矢量，但是此设置会对大量矢量数据产生性能影响。设置false为时，如果没有动画处于活动状态，将重新创建批次。 updateWhileInteracting 布尔值 （默认为false） 设置true为时，将在交互期间重新创建功能批次。另请参阅updateWhileAnimating。

用法：

new ol.layer.Vector(
                {
                    source: new ol.source.Vector({
                        projcetion: 'EPSG:4326',
                        url: '../data/glass.geojson',
                        format: new ol.format.GeoJSON()
                    })
                }
            )

5.4 矢量切片Vector/VectorTile

options选项：

名称	类型	描述
options	选项。 名称 类型 描述 className 字符串 （默认为“ ol-layer”） 设置为layer元素的CSS类名称。 opacity 数字 （默认为1） 不透明度（0，1）。 visible 布尔值 （默认为true） 能见度。 extent 模块：ol /范围〜范围 图层渲染的边界范围。该图层不会在此范围之外渲染。 zIndex 数 图层渲染的Z索引。在渲染时，将首先按Z-index然后按位置对图层进行排序。当时undefined，zIndex对于添加到地图layers集合中Infinity的图层或使用该图层的setMap() 方法时，假设a 为0 。 minResolution 数 该层可见的最低分辨率（含）。 maxResolution 数 在该层以下可见的最大分辨率（不包括）。 minZoom 数 最小视图缩放级别（不包括此级别），在该级别之上，该层将可见。 maxZoom 数 该图层可见的最大视图缩放级别（包括该级别）。 renderOrder 模块：ol / render〜OrderFunction 渲染顺序。在渲染之前对要素进行排序时使用的函数。默认情况下，要素是按照创建顺序绘制的。使用 null避免排序，但得到一个未定义的绘制顺序。 renderBuffer 数字 （默认为100） 从矢量图块获取特征以进行渲染或点击检测时，渲染器使用的图块范围周围的像素缓冲区。推荐值：矢量切片通常是使用缓冲区生成的，因此该值应与所用切片的最大缓冲区匹配。它至少应为最大点符号或线宽的大小。 renderMode 模块：ol / layer / VectorTileRenderType | 字符串 （默认为“混合”） 矢量图块的渲染模式： 'image'：矢量图块呈现为图像。出色的性能，但是在缩放动画期间，点符号和文本始终随视图旋转，并且像素缩放。当declutter 设置true为时，将对每个图块进行整理，从而导致标签和点符号在图块边界处被切除。 'hybrid'：多边形和线元素会呈现为图像，因此在缩放动画期间会缩放像素。点符号和文本可以准确地呈现为矢量，并且可以在旋转视图上保持直立。 'vector'：所有内容均呈现为矢量。使用此模式可以改善仅包含少数渲染特征的矢量平铺图层的性能（例如，突出显示具有相同源的另一层要素的子集）。 source 模块：ol / source / VectorTile〜VectorTile 资源。 map 模块：ol / PluggableMap〜PluggableMap 将图层设置为地图上的叠加层。地图将不在其图层集合中管理该图层，并且该图层将呈现在顶部。这对于临时层很有用。在地图上添加图层并由地图管理图层的标准方法是使用module:ol/Map#addLayer。 declutter 布尔值 （默认为false） 整理图像和文字。将已设置为的所有Vector和VectorTile图层的所有图像和文本样式都应用去毛刺true。优先级由图层的z-index，zIndex样式的样式和要素的渲染顺序定义。z索引越高，优先级越高。在同一z索引内，在另一个特征之前渲染的特征具有更高的优先级。 style 模块：ol / style / Style〜StyleLike 图层样式。请参阅 module:ol/style以获取默认样式，如果未定义，将使用默认样式。 updateWhileAnimating 布尔值 （默认为false） 设置true为时，将在动画过程中重新创建功能批次。这意味着将不会显示任何裁剪的矢量，但是此设置会对大量矢量数据产生性能影响。设置false为时，如果没有动画处于活动状态，将重新创建批次。 updateWhileInteracting 布尔值 （默认为false） 设置true为时，将在交互期间重新创建功能批次。另请参阅updateWhileAnimating。 preload 数字 （默认为0） 预加载。加载低分辨率图块，直至达到preload级别。0 表示没有预加载。 useInterimTilesOnError 布尔值 （默认为true） 出现错误时使用临时磁贴。