当前位置：首页 > java >正文

openlayers [四] 地图图层 Layers详解

java 2025/7/2 19:02:13

文章目录

- 1 图层
- - 1.1 线状图层
  - 1.2 点状图层
  - 1.3 面状图层
- 2 图层存在一个或多个
- 3 layers常见的属性
- 4 layers各种图层和类型
- 总结

在这里插入图片描述

在 openlayers 中，图层是使用 layer 对象表示的，主要有 WebGLPoints Layer、热度图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer) 和矢量图层(Vector Layer) 五种类型，它们都是继承 Layer 类的。
openlayers初始化一幅地图(map)，至少需要一个可视区域(view)，一个或多个图层( layer)，和一个地图加载的目标 HTML 标签(target)，其中最重要的是图层(layer)

1 图层

1.1 线状图层

其实可以根据图层的中文含义已经理解了很大部分，为了更深的便于大家对 Layers 的理解，可以看下下面这张图。其实 openlayers 简单的新建map只是相当于一张可以移动，缩放的图片。但是实际项目需求往往需要在地图上添加各种图层来丰富我们的地图。

线状地物：道路、河流、线路、运行轨迹等应用
在这里插入图片描述

1.2 点状图层

点状图层：建筑、店铺、学校、红绿灯等场景
在这里插入图片描述

1.3 面状图层

面状图层：诸如行政区域等有一定范围的地物
在这里插入图片描述

2 图层存在一个或多个

// 初始化一个地图
initMap() {let target = "map"; //跟页面元素的 id 绑定来进行渲染let tileLayer = [new Tile({source: new OSM()})];let view = new View({center: fromLonLat([104.912777, 34.730746]), //地图中心坐标zoom: 4.5 //缩放级别});this.map = new Map({target: target, //绑定dom元素进行渲染layers: tileLayer, //配置地图数据源view: view //配置地图显示的options配置（坐标系，中心点，缩放级别等）});
}

上面代码我们可以看到，new Map() 里面的layers 属性接收的tileLayer 值是一个数组，也就是说可以在地图上叠加一个或者多个图层

3 layers常见的属性

source，指定了图层的数据来源，图层作用是以一定的样式渲染数据，source则指定了数据；
className，图层各个元素的样式；
zIndex，图层的叠加次序，默认是0，最底层，如果使用setMap方法添加的图层，zIndex值是Infinity，在最上层；
extent，图层渲染的区域，即浏览器窗口中可见的地图区域。extent 是一个矩形范围，格式是[number, number, number, number] 分别代表 [left, bottom, right, top]为了提升渲染效率和加载速度，extent范围之外的瓦片是不会请求的，当然也不会渲染；
opacity，不透明度（0，1），默认为 1 ，即完全透明； visible，是否可见；
visible，布尔值（默认为true）能见度。
render，渲染功能。将框架状态作为输入，并期望返回HTML元素。将覆盖该图层的默认渲染。
minResolution，图层可见的最小分辨率；
maxResolution，图层可见的最大分辨率；
minZoom，最小视图缩放级别（不包括），在该级别之上，该层将可见。
maxZoom，该图层可见的最大视图缩放级别（包括该级别）。