Question

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

Answer 1

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

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

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

Answer 2

GitHub用户shramov的leaflet-plugins存储库（链接到Nicolas答案中共享的the gist）包含一个使用Bing tile图层的示例，据我所知，它已得到很好的维护。您需要包含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文件，则会在Line 4上看到type属性设置为'Aerial'。对于相应的平铺图像，可以将其更改为'Road'或'AerialWithLabels'。

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

2 个答案: