首页 / OpenLayers / 使用示例
多图层叠加
一张地图上同时放瓦片底图、矢量面和矢量点,按需开关叠加层。 这是大多数业务地图的起点:底图负责地理背景,叠加层负责业务信息。
源码与运行效果
说明
layers 数组的顺序决定绘制顺序,写在后面的图层盖在前面之上。
代码里还给了城市点图层 zIndex: 10,
这是另一种排序方式:zIndex 大的先渲染在更上层,
适合在运行时动态调整而不用重排数组。
| 图层 | 类型 | 作用 |
|---|---|---|
| 底图 | ol.layer.Tile | OSM 瓦片,提供街道背景 |
| 区域面 | ol.layer.Vector | 半透明矩形,圈定范围 |
| 城市点 | ol.layer.Vector | 带文字标注的点位,置顶显示 |
关闭叠加层用 setVisible(false),不要用 removeLayer。
隐藏的图层仍保留数据和状态,重新打开时不需要重建要素。
给视图设置 extent 可以限制拖动范围,避免用户把地图拖到无关区域。
示例先用 ol.proj.transformExtent 把经纬度范围整体转成米制,
再交给视图;范围必须是 [minX, minY, maxX, maxY] 的扁平数组,
不是两个坐标点。