正しくGoogleマップの静的タイルをリーフレットで使用する方法

Googleマップで生成したタイルをリーフレットで静的APIを使用しようとしています（インターネット接続なしでオフラインで使用されるため事前にタイルを生成する必要があります）。 https://maps.googleapis.com/maps/api/staticmap?center=54.217,-4.5373&zoom=8&size=640x640&maptype=roadmap 正しくGoogleマップの静的タイルをリーフレットで使用する方法

得タイル：

例えば、ズームレベル8と緯度/経度（54.217、-4.5373）でマン島を中心640x640タイルを作成するために、私は、次のリクエストのURLを使用してい以下に示します。

次は私がリーフレットで、このタイルを使用し、次のコードでタイルの中心にマーカーを追加したい：

<html> 
<header> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="http://localhost/leaflet.js"></script> 
    <style> 
    #map {height: 640px; width:640px;} 
    </style> 

</header> 

<body> 
<div id="map"></div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     // Handler for .ready() called. 
     console.log("document ready!"); 
     var map = L.map('map').setView([54.217, -4.5373], 8); 

     L.tileLayer('http://localhost/staticmap.png', { 
     attribution: 'Copyright Google Maps', 
     tileSize: 640, 
     minZoom:8, 
     maxZoom:8, 
     continuousWorld: false, 
     nonoWrap: false, 
     }).addTo(map); 
     var marker = L.marker([54.217, -4.5373]).addTo(map); 
    }); 
</script> 

</body> 
</html>

しかし、結果のマップは完全に「オフセンタリング」されています（マーカーは人間の島にもあるはずです）。わからない私がここで間違ってやっている何を：

をこれの任意の助けいただければ幸いです！ありがとう！

出典

2017-01-19 BigONotation

最初に、「静的マップAPI」の画像はタイルではないことを考慮してください。任意のサイズをリクエストでき、そのような画像をつなぎ合わせる簡単な方法はありません。 1つのタイルが終了すると、別のタイルが開始されるため、タイルはうまく動作します。タイルには、TMS specificationで説明されているようなグリッドが必要です。

第2に、タイルではないので、L.TileLayerを使用するのが最善の方法ではありません。マップの投影法に適した北向きの画像の場合は、L.ImageOverlayを使用しています。

イメージオーバーレイを使用するには、イメージのバウンディングボックスを計算する必要があります。それはlook like thisをする必要がありますが、イメージオーバーレイと境界のためのURLを持っていたら、

console.log('lat-lng of center:', map.containerPointToLatLng(map.getSize().divideBy(2))); 
console.log('lat-lng of center -320px:', map.containerPointToLatLng(map.getSize().divideBy(2).subtract([320,320]))); 
console.log('lat-lng of center +320px:', map.containerPointToLatLng(map.getSize().divideBy(2).add([320,320])));

をマップに追加して：あなたのケースでは、我々として手動でそれを行うことができます。

最後は、特に、terms and conditions for stuff coming from the google maps APIの点に注意してください。

10.5.d ないキャッシュやストレージ。

また、他のWebマッププラットフォームにはこれらの制限がないことに注意してください。

出典

2017-01-19 11:39:33 IvanSanchez

Googleマップの利用規約の制限事項への解決策と指針 – BigONotation

正しくGoogleマップの静的タイルをリーフレットで使用する方法

答えて

関連する問題