第一个 OpenLayers 地图

四个核心对象

这四者关系是：Map 里放 Layer， Layer 里放 Source，Map 的视角由 View 决定。 和 Leaflet 相比，多了一层显式的 Source，换来的是同一个图层类可以接 任意数据源。

投影：最容易绊住人的地方

OpenLayers 默认使用 EPSG:3857（Web 墨卡托），单位是米。 业务数据通常是经纬度（EPSG:4326），所以要转换：

var center = ol.proj.fromLonLat([116.391263, 39.907359]);

var view = new ol.View({
  center: center,
  zoom: 12
});

忘了这一步的典型现象是：地图飞到几内亚湾或者停在零级缩放的整个世界， 因为 [116, 39] 被当成米制坐标，实际位置几乎贴着原点。

最小可运行代码

<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/ol@10.3.1/dist/ol.js"></script>
<script>
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({ source: new ol.source.OSM() })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([116.391263, 39.907359]),
      zoom: 12
    })
  });
</script>

别忘了引入 ol.css，否则缩放按钮和版权信息会错位。 地图容器同样需要确定高度，和 Leaflet 的要求一致。

和 Leaflet 怎么选

常见问题

地图只显示一半，或者拖动时出现白块

容器尺寸在初始化时还没确定。等布局稳定后再创建 Map， 或者创建之后调用 map.updateSize()。

矢量点位置对，但偏出地图边界

要素坐标没有做投影转换。用 new ol.geom.Point(ol.proj.fromLonLat([lng, lat]))， 不要直接塞经纬度。