OpenLayers集成Azure Maps后无法添加OSM/WMS等其他图层如何解决

云上老周

2026-9-25

错误根因

你遇到的ol.source.OSM is not a constructor报错核心有两个：

依赖引入顺序错误/不完整：你只引入了Azure Maps的OpenLayers插件，没有提前引入完整的OpenLayers核心依赖，导致ol全局命名空间下的各类source构造函数没有正常挂载
版本不兼容：你使用的OpenLayers版本和Azure Maps OpenLayers插件要求的版本不匹配，目前该插件仅适配OpenLayers 6.x版本，7.x及以上高版本OpenLayers已经调整了部分全局命名空间的挂载逻辑，会触发该报错

解决步骤

1. 调整依赖引入顺序和版本

必须严格按照「OpenLayers核心依赖→Azure Maps OpenLayers插件」的顺序引入资源，且OpenLayers需使用6.x版本：

<!-- 第一步：引入OpenLayers 6.x版本的CSS文件 -->
<link rel="stylesheet" href="./js/ol/ol.css">
<!-- 第二步：引入OpenLayers 6.x版本的核心JS文件 -->
<script src="./js/ol/ol.js"></script>
<!-- 第三步：引入Azure Maps OpenLayers插件 -->
<script src="./js/azure-maps-openlayers.js"></script>

引入完成后可在浏览器控制台输入ol.source.OSM验证，返回构造函数即说明依赖加载正常。

2. 不同开发场景的写法适配

传统页面开发（全局ol命名空间场景）：你的原有代码不需要调整，确认依赖正确后即可正常加载OSM、WMS、XYZ等各类图层
模块化开发场景（npm引入ol包的框架项目）：需要单独导入对应图层的source类再使用：

// 导入所需的source类
import OSM from 'ol/source/OSM';
import TileWMS from 'ol/source/TileWMS';
import XYZ from 'ol/source/XYZ';

// 图层配置示例
new ol.layer.Tile({
  type: 'overlay',
  visible: true,
  source: new OSM()
})