Fatal编程技术网
  • javascript/
  • Javascript Microsoft.Maps.TileSource回调的凭据

Javascript Microsoft.Maps.TileSource回调的凭据

javascript asp.net-mvc

Javascript Microsoft.Maps.TileSource回调的凭据,javascript,asp.net-mvc,bing-maps,azure-maps,Javascript,Asp.net Mvc,Bing Maps,Azure Maps,我正在尝试向我的地图添加自定义的Microsoft.Maps.TileSource（） 我在ASP.NET MVC应用程序中将uriConstructor设置为WebAPI端点。我希望要求对WebAPI端点进行身份验证，但似乎没有一种方法可以通过回调请求发送托管网页的凭据 是否有办法指定TileSource web服务调用的凭据？正确，Bing地图无法做到这一点。我建议改为看看Azure地图。这可以通过Azure地图实现，方法是设置地图的transformRequest选项，然后创建一个平铺层并

我正在尝试向我的地图添加自定义的Microsoft.Maps.TileSource（）

我在ASP.NET MVC应用程序中将uriConstructor设置为WebAPI端点。我希望要求对WebAPI端点进行身份验证，但似乎没有一种方法可以通过回调请求发送托管网页的凭据

是否有办法指定TileSource web服务调用的凭据？

正确，Bing地图无法做到这一点。我建议改为看看Azure地图。这可以通过Azure地图实现，方法是设置地图的transformRequest选项，然后创建一个平铺层并将其添加到地图中。下面是一个快速代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>Tile Layer using X, Y, and Z - Azure Maps Web Control Samples</title>

    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/css/atlas.min.css?api-version=1" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/js/atlas.min.js?api-version=1"></script>

    <script type='text/javascript'>
        var map;

        function GetMap() {
            //Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
            atlas.setSubscriptionKey('<Your Azure Maps Key>');

            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-99.47, 40.75],
                zoom: 4,
                trasnformRequest: function(url, resourceType){
                    if(url.startsWith('https://mytileserviceurl...') {
                        return {
                            url: url,
                            credentials: 'include',
                            headers: {
                                'my-header': true
                            }
                        };
                    }
                }
            });

            //Wait until the map resources have fully loaded.
            map.events.add('load', function (e) {
                //Create a tile layer and add it to the map below the label layer.
                //Weather radar tiles from Iowa Environmental Mesonet of Iowa State University.
                map.layers.add(new atlas.layer.TileLayer({
                    tileUrl: 'https://mytileserviceurl/{z}/{x}/{y}.png',
                    opacity: 0.8,
                    tileSize: 256
                }), 'labels');
            });
        }
    </script>
</head>
<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:350px;height:600px;"></div>
</body>
</html>


使用X、Y和Z平铺层-Azure地图Web控件示例
var映射；
函数GetMap（）{
//将Azure地图订阅密钥添加到地图SDK。在获取Azure地图密钥https://azure.com/maps
atlas.setSubscriptionKey（“”）；
//初始化映射实例。
map=新的atlas.map（'myMap'{
中间：[-99.47,40.75]，
缩放：4，
trasnformRequest:函数（url、resourceType）{
if（url.startsWith（'https://mytileserviceurl...') {
返回{
url:url，
凭据：“包括”，
标题：{
“我的标题”：正确
}
};
}
}
});
//等待地图资源完全加载。
map.events.add（'load'，函数（e）{
//创建平铺层并将其添加到标签层下方的地图中。
//来自爱荷华州立大学爱荷华环境中网的天气雷达瓦。
map.layers.add（新的atlas.layer.tillelayer）({
蒂勒尔：'https://mytileserviceurl/{z} /{x}/{y}.png'，
不透明度：0.8，
瓷砖尺寸：256
})"标签";；
});
}
以下是一些相关资源：

以下是Azure地图上的一些附加资源：

  • 主信息页（概述/定价）：
  • 文件：