openLayers6系列理论基础——Layer篇

布满荆棘的人生 2021-08-29 01:14 747阅读 0赞

# openLayers6系列理论基础——Layer篇 #

# 一、Layer介绍 #

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

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

# 二、Layer主要属性 #

*  source，指定了图层的数据来源，图层作用是以一定的样式渲染数据，source则指定了数据，具体参考[这里][Link 1]。；
 *  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选项**：

## 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：

## 5.3 矢量数据Vector/VectorLayer ##

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

常用options：

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

用法：

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选项：

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

[Link 1]: https://blog.csdn.net/happy81997/article/details/105786195