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

Question

我正在尝试将 azure maps 图层添加到我的 openlayers 项目中。我可以使用 this third party plugin and example 和我的天蓝色地图键制作基本地图。但是，当我尝试从 Geoserver 添加附加层（例如 OSM 或 WMS 层）时，它会在控制台中抛出错误：“Uncaught TypeError: ol.source.OSM is not a constructor”。我有许多不同的图层类型（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 Maps 集成。

如果你检查这个 Azure Maps Class，你就会明白为什么会收到错误。

Namespace: ol.source

A tile source that connects to the Azure Maps Render V2 services.

Contstructor AzureMaps(options?: AzureMapsTileSourceOptions)

但是，如果您想将 WSM 层与 Azure Maps 集成，则可以通过使用 Azure Maps 添加 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');
});

有关详细信息，请查看此 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 document completely and also check this 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
        });
    }

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

Azure Maps with OSM / WMS / other layers in OpenLayers

javascript

azure

openlayers

openstreetmap