openlayers 入门教程（四）：layers 篇

作者：Gausst松鼠会 | 2024-05-20 00:00:52

踩

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

在这里插入图片描述

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

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

在 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 就是这种类型。

五、加载常用的地图底图

六、Openlayers 入门教程 -系列文章列表

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/595145

openlayers 入门教程（四）：layers 篇

文章目录

一、常用参数

二、常用监听事件

三、OpenLayers中的图层类型

四、按照渲染分类

五、加载常用的地图底图

1 加载谷歌地图

2 加载OSM地图

3 加载Bing地图

4 加载Mapbox地图

5 加载baidu地图

6 加载Arcgis地图

7 加载高德地图

8 加载天地图

六、Openlayers 入门教程 -系列文章列表