OpenLayers 中带有 OSM / WMS / 其他层的 Azure Maps

Question

我正在尝试向我的 openlayers 项目添加一个 azure 地图图层。我可以使用 this third party plugin and example 和我的 azure maps 键制作基本地图。但是，当我尝试从 Geoserver 添加其他层（例如 OSM 或 WMS 层）时，它会在控制台中引发错误：“未捕获的 TypeError：ol.source.OSM 不是构造函数”。我有许多不同的图层类型（OSM、WMS、XYZ），我想在 Azure 中添加它们，但我无法让其中任何一个工作，它们都抛出类似的错误。

有什么想法可以在 Openlayers 中在 Azure 地图旁边添加其他图层吗？

相关代码sn-p：

    <!-- Add reference to the Azure Maps OpenLayers plugin.-->
<script src="./js/azure-maps-openlayers.js"></script>

<script type='text/javascript'>
    var map;
    function GetMap() {

        //Add authentication details for connecting to Azure Maps.
        var authOptions = {
            authType: 'subscriptionKey',
            subscriptionKey: 'aaaaaaaabbbbbbbbccccccccddddddddd'
        };

        //Create a map instance.
        map = new ol.Map({
            target: 'myMap',
            layers: [
                new ol.layer.Tile({
                    type: 'base',
                    visible: true,  
                    source: new ol.source.AzureMaps({
                        authOptions: authOptions,
                        tilesetId: 'microsoft.imagery'
                    })
                }),
                new ol.layer.Tile({
                    type: 'overlay',
                    visible: false, 
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });
    }
</script>

Answer 1

我进行了一些研究，但没有找到任何建议我们如何将 OSM 层与 OpenLayers 中的 Azure Maps 集成的方案或文档。

如果您检查此Azure Maps Class，您就会明白为什么会出现错误。

命名空间： ol.source

连接到 Azure Maps Render V2 服务的磁贴源。

构造函数 AzureMaps(options?: AzureMapsTileSourceOptions)

但如果您想将 WSM 层与 Azure Maps 集成，则可以通过在 Azure Maps 中添加 OGC Web 映射服务来实现，如下面的代码 sn-p 所示。

//Initialize a map instance.
var map = new atlas.Map('map', {
  view: "Auto",
  //Add your Azure Maps subscription client ID to the map SDK. Get an Azure Maps client ID at https://azure.com/maps
  authOptions: {
    authType: "anonymous",
    clientId: "04ec075f-3827-4aed-9975-d56301a2d663", //Your AAD client id for accessing your Azure Maps account

    getToken: function (resolve, reject, map) {
      //URL to your authentication service that retrieves an Azure Active Directory Token.
      var tokenServiceUrl = "https://azuremapscodesamples.azurewebsites.net/Common/TokenService.ashx";

      fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
    }
  }
});

//Wait until the map resources are ready.
map.events.add('ready', function () {

  map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://mrdata.usgs.gov/services/gscworld?FORMAT=image/png&HEIGHT=1024&LAYERS=geology&REQUEST=GetMap&STYLES=default&TILED=true&TRANSPARENT=true&WIDTH=1024&VERSION=1.3.0&SERVICE=WMS&CRS=EPSG:3857&BBOX={bbox-epsg-3857}',
    tileSize: 1024
  }), 'transit');
});

有关详细信息，请查看此Add a tile layer Microsoft 文档。

如果您想使用 OpenLayers 在 Azure Maps 上工作，那么我建议您使用 Azure Maps OpenLayers 插件。 OpenLayers 插件可以很容易地覆盖来自Azure Maps tile services 的平铺层。您只能使用 Azure Maps 切片图层，如下例所示。

//Create a map instance.
 map = new ol.Map({ 
     target: 'myMap', 
     layers: [
          new ol.layer.Tile({ 
              source: new ol.source.AzureMaps({ 
                  authOptions: authOptions, 
                  tilesetId: 'microsoft.imagery' 
              }) 
        }),
        new ol.layer.Tile({
            source: new ol.source.AzureMaps({
                authOptions: authOptions,
                tilesetId: 'microsoft.base.road'
            })
        }) 
    ], 
    view: new ol.View({ 
        center: [0, 0], 
        zoom: 2 
    }) 
});

我强烈建议您完整阅读此 Azure Maps OpenLayers plugin 文档并查看此 Azure-Samples/AzureMapsCodeSamples GitHub 代码示例以获取更多信息。

Answer 2

好的，我已经设法通过以下代码使其工作。它实际上发布在底部的 Azure Maps Openlayers 插件页面 - “OpenLayers 的替代选项”。具有讽刺意味的是，根本不需要该插件来使其工作 - 您只需将 Azure Maps 层引用为 ol.source.XYZ 层。显然，您可以更改两个图层的可见性选项以将它们可视化 - 或将它们添加到图层切换器中。

        var map;
    function GetMap() {

        var subscriptionKey = 'my_subscription_key_goes_here';
        var tilesetId = 'microsoft.imagery';
        var language = 'EN';
        var view = new ol.View({
                center: [0, 0],
                zoom: 2
            });

        //Create a map instance.
        map = new ol.Map({
            target: 'myMap',
            layers: [
                new ol.layer.Tile({
                    type: 'base',
                    visible: true,                  
                    source: new ol.source.XYZ({
                        url: `https://atlas.microsoft.com/map/tile?subscription-key=${subscriptionKey}&api-version=2.0&tilesetId=${tilesetId}&zoom={z}&x={x}&y={y}&tileSize=256&language=${language}`,
                        attributions: `© ${new Date().getFullYear()} TomTom, Microsoft`
                    })
                }),
                new ol.layer.Tile({
                    type: 'overlay',
                    visible: true,  
                    source: new ol.source.OSM()
                })
            ],
            view: view
        });
    }