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

Question

我正在尝试将 azure 地图图层添加到我的 openlayers 项目中。 我可以使用这个第三方插件和我的 azure 映射键的示例来制作基本的 map 工作。 但是，当我尝试从 Geoserver 添加其他层（例如 OSM 或 WMS 层）时，它会在控制台中引发错误：“未捕获的 TypeError：ol.source.OSM 不是构造函数”。 我有许多不同的图层类型（OSM、WMS、XYZ），我想将它们与 Azure 一起添加，但我无法让其中任何一个工作，它们都抛出类似的错误。

任何想法如何在 Openlayers 中在 Azure 地图旁边添加其他层？

相关代码片段：

    <!-- 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 地图集成的场景或文件。

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

命名空间： ol.source

连接到 Azure Maps Render V2 服务的图块源。

构造函数AzureMaps AzureMaps(options?: AzureMapsTileSourceOptions)

但是，如果您想将 WSM 层与 Azure 地图集成，那么您可以通过添加带有 Azure 地图的 OGC 网络地图服务来实现它，如以下代码片段所示。

//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');
});

有关更多信息，请查看此添加切片图层Microsoft 文档。

如果您想使用 OpenLayers 处理 Azure 地图，那么我建议您使用 Azure 地图 OpenLayers 插件。 OpenLayers 插件可以轻松地从Azure 地图瓦片服务覆盖瓦片层。 您只能使用 Azure 地图切片图层，如下例所示。

//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 插件文档，并查看此 Azure-Samples/ AzureMapsCodeSamples GitHub 代码示例以获取更多信息。

Answer 2

好的，我已经设法通过以下代码使其工作。 它实际上发布在底部的 Azure Maps Openlayers 插件页面 - “OpenLayers 的替代选项”。 具有讽刺意味的是，该插件根本不需要它来工作 - 您只需将 Azure 地图层引用为 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
        });
    }