Microsoft.Maps.TileSource 回调的凭据
Credentials for Microsoft.Maps.TileSource callback
我正在尝试向我的地图添加自定义 Microsoft.Maps.TileSource()。
我在 ASP.NET MVC 应用程序中将 uriConstructor 设置为 WebAPI 端点。我更愿意要求对 WebAPI 端点进行身份验证,但似乎没有办法通过回调请求发送托管网页的凭据。
有没有办法指定 TileSource Web 服务调用的凭据?
正确,Bing 地图无法做到这一点。我建议改为查看 Azure Maps。这可以使用 Azure Maps 来实现,方法是设置地图的 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>
以下是一些相关资源:
- https://docs.microsoft.com/en-us/azure/azure-maps/map-add-tile-layer
- https://azuremapscodesamples.azurewebsites.net/index.html#Tile-Layers
- https://docs.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.serviceoptions?view=azure-iot-typescript-latest#transformrequest
- https://docs.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.requestparameters?view=azure-iot-typescript-latest
这是 Azure Maps 上的一些额外资源:
- 主信息页面(overview/pricing):https://azure.com/maps
- 文档:https://docs.microsoft.com/en-us/azure/azure-maps/
我正在尝试向我的地图添加自定义 Microsoft.Maps.TileSource()。
我在 ASP.NET MVC 应用程序中将 uriConstructor 设置为 WebAPI 端点。我更愿意要求对 WebAPI 端点进行身份验证,但似乎没有办法通过回调请求发送托管网页的凭据。
有没有办法指定 TileSource Web 服务调用的凭据?
正确,Bing 地图无法做到这一点。我建议改为查看 Azure Maps。这可以使用 Azure Maps 来实现,方法是设置地图的 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>
以下是一些相关资源:
- https://docs.microsoft.com/en-us/azure/azure-maps/map-add-tile-layer
- https://azuremapscodesamples.azurewebsites.net/index.html#Tile-Layers
- https://docs.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.serviceoptions?view=azure-iot-typescript-latest#transformrequest
- https://docs.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.requestparameters?view=azure-iot-typescript-latest
这是 Azure Maps 上的一些额外资源:
- 主信息页面(overview/pricing):https://azure.com/maps
- 文档:https://docs.microsoft.com/en-us/azure/azure-maps/