RequireJS项目中OpenLayers对接OpenStreetMap报错及配置咨询

报错原因 #

1. 过时的API调用：ol.OSM() 是OpenLayers旧版本（v3及更早）的快捷构造函数，v4+版本已移除该API，需改用 ol.layer.Tile 搭配 ol.source.OSM 实现OSM图层加载。
2. RequireJS模块加载异常：ol.source.OSM 报错是因为OpenLayers模块未被RequireJS正确加载——要么是路径配置错误导致库文件未找到，要么是未通过AMD规范的模块导入方式使用OpenLayers，直接访问全局ol对象时模块还未初始化。

正确配置与代码实现 #

1. index.jsp 中 RequireJS 配置 #

确保路径指向正确的UMD版本ol.js，并引入样式文件：

<!-- 引入RequireJS -->
<script src="path/to/require.js"></script>
<!-- 配置RequireJS -->
<script>
require.config({
  paths: {
    // 指向ol.js所在路径，无需加.js后缀
    'ol': 'lib/osm/ol',
    'backbone': 'path/to/backbone',
    'underscore': 'path/to/underscore'
  }
});
// 加载地图视图模块
require(['map-view']);
</script>
<!-- 引入OpenLayers样式 -->
<link rel="stylesheet" href="lib/osm/ol.css">

2. map-view.html 地图容器 #

确保容器有明确的宽高样式，否则地图无法显示：

<div id="map-container" style="width: 100%; height: 600px;"></div>

3. map-view.js 正确初始化地图 #

通过RequireJS导入所需的OpenLayers模块，结合Backbone View实现：

define(['backbone', 'ol', 'ol/layer/Tile', 'ol/source/OSM', 'ol/Map', 'ol/View'], 
function(Backbone, ol, TileLayer, OSM, Map, View) {
  return Backbone.View.extend({
    el: '#map-container',
    initialize: function() {
      this.initMap();
    },
    initMap: function() {
      // 创建地图实例
      this.map = new Map({
        target: this.el,
        layers: [
          // 创建OSM瓦片图层
          new TileLayer({
            source: new OSM()
          })
        ],
        view: new View({
          // 设置初始中心（经纬度转墨卡托投影）
          center: ol.proj.fromLonLat([0, 0]),
          zoom: 2
        })
      });
    }
  });
});

额外注意事项 #

• 确认下载的是OpenLayers官方的UMD版本（即包含ol.js的完整构建包），而非ES模块拆分文件，否则RequireJS无法正确识别模块结构。
• 地图容器必须设置宽高样式，否则即使地图初始化成功也无法可视化。

内容的提问来源于stack exchange，提问作者Марина