经纬志
首页 / OpenLayers / API 文档

Map

先看结论

地图容器对象。负责把图层渲染到画布,并把鼠标交互转换成地图事件。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文
new ol.Map(options)

构造参数

参数说明
target容器元素或 id
layers图层数组,或返回图层的函数
viewol.View 实例,决定坐标系与视角
controls控件集合,默认含缩放、旋转、版权
interactions交互集合,默认含拖拽、滚轮、双击
pixelRatio像素比,高分屏可显式设 2 提升清晰度
maxTilesLoading并行瓦片请求上限,默认 16

图层管理

方法说明
addLayer(layer)添加图层
removeLayer(layer)移除图层
getLayers()返回图层集合
forEachLayerAtPixel(pixel, cb)命中测试,判断点击处命中了哪些图层

视图与坐标

方法说明
getView()取视图对象
setView(view)替换视图
getCoordinateFromPixel(pixel)屏幕像素转地图坐标(米)
getPixelFromCoordinate(coord)地图坐标转屏幕像素
updateSize()容器尺寸变化后重算
setTarget(el)更换挂载容器,设为 null 可解绑

常用事件

事件说明回调参数
click单击evt.coordinate 为地图坐标
singleclick区分于双击的单次点击同上
pointermove鼠标移动,高频evt.coordinate
moveend视图移动结束—
map.on('singleclick', function (evt) {
  var lonlat = ol.proj.toLonLat(evt.coordinate);
  console.log(lonlat[0], lonlat[1]);
});

evt.coordinate 是投影后的米制坐标。 要经纬度必须再调一次 ol.proj.toLonLat,直接当经纬度用会得到上万量级的数值。

引用本文

经纬志(2026)。《Map》。https://www.jingweizhi.com/openlayers/api/map.html(访问日期 2026-11-03)。