将Bing地图图块与Leaflet一起使用

Question

我正在尝试将Bing地图图块集成到Leaflet中.我发现这样做的所有插件都没有帮助,因为他们没有使用它们的信息.我可以在PHP中编写一个脚本来从Leaflet接收X,Y和Z坐标(只是将脚本设置为tile服务器URL),但是我需要一种方法将它们转换为Quadkey.任何一个答案都是可以接受的.如果有帮助,我确实有Bing Maps API密钥.

Answer 1

GitHub 用户 shramov 的 Leaflet -plugins存储库（链接到Nicolas 回答中共享的要点中）包括一个使用 Bing 平铺层的示例，据我所知，它维护得相当好。您需要包含Bing.js文件以及 Leaflet JS 和 CSS：

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="Bing.js"></script> 

<div id="map"></div>

<script type='text/javascript'>
    var map = new L.Map('map', {center: new L.LatLng(67.6755, 33.936), zoom: 10 });
    var bing = new L.BingLayer(YOUR_BING_API_KEY);
    map.addLayer(bing);
</script>

您会注意到 Bing 切片图层默认为航拍图像。如果您打开该Bing.js文件，您将在第 4 行看到该type属性设置为'Aerial'。这可以更改为'Road'或'AerialWithLabels'用于相应的平铺图像。

Answer 2

我认为您不需要使用 php 模块来执行此操作，因为您可以直接从 Leaflet 中的 X/Y/Zoom 生成四键并将 Bing 地图图块集成到您的客户端应用程序中。要使用 JavaScript 将 X/Y/缩放转换为四键，可以这样做：

function TileXYToQuadKey(tileX, tileY, levelOfDetail) {
    var quadKey = '';
    for (var i = levelOfDetail; i > 0; i--) {
        var digit = '0';
        var mask = 1 << (i - 1);
        if ((tileX & mask) != 0) {
            digit++;
        }
        if ((tileY & mask) != 0) {
            digit++; digit++;
        }
        quadKey += digit;
    } //for i return quadKey; 
}

以下是 Bing 层在传单中的可能实现：https://gist.github.com/1221998

在这里，您将找到有关 Bing 使用的平铺方案的有趣信息： http://msdn.microsoft.com/en-us/library/bb259689.aspx

请记住，这种使用不应在没有考虑许可的情况下进行。您应该使用图像服务的信息来集成它，就像与传单插件一起使用一样（这样您就可以跟踪您的使用情况并有支持的方式来访问 Bing 磁贴 URI），有关图像服务的更多信息，请参阅以下 MSDN 文档： http： //msdn.microsoft.com/en-us/library/ff701716.aspx