经纬志
首页 / OpenLayers / 使用示例

多图层叠加

一张地图上同时放瓦片底图、矢量面和矢量点,按需开关叠加层。 这是大多数业务地图的起点:底图负责地理背景,叠加层负责业务信息。

OpenLayers 10.3.1 · 更新 2026-10-27
源码与运行效果
运行效果

说明

layers 数组的顺序决定绘制顺序,写在后面的图层盖在前面之上。 代码里还给了城市点图层 zIndex: 10, 这是另一种排序方式:zIndex 大的先渲染在更上层, 适合在运行时动态调整而不用重排数组。

图层类型作用
底图ol.layer.TileOSM 瓦片,提供街道背景
区域面ol.layer.Vector半透明矩形,圈定范围
城市点ol.layer.Vector带文字标注的点位,置顶显示

关闭叠加层用 setVisible(false),不要用 removeLayer。 隐藏的图层仍保留数据和状态,重新打开时不需要重建要素。

给视图设置 extent 可以限制拖动范围,避免用户把地图拖到无关区域。 示例先用 ol.proj.transformExtent 把经纬度范围整体转成米制, 再交给视图;范围必须是 [minX, minY, maxX, maxY] 的扁平数组, 不是两个坐标点。