7

私は現在、こちらでGoogle Maps API V3に取り組んでいます

21 から 23 の間でズームすると、マップ上に画像がオーバーレイされます。画像の読み込みに時間がかかりすぎるため、読み込みを簡単にするために画像を複数のタイルに分割することにしました。自動タイル カッターを使用して画像をタイルにカットしています。

スクリプトに問題があります。

    var OrgX = 31551;   // the Google Maps X value of the tile at the top left corner of your Photoshop document 
    var OrgY = 50899;   // the Google Maps Y value of the tile at the top left corner of your Photoshop document

最初の質問Photoshop ドキュメントから X と Y の値をどのように見つけますか?

最初の質問をなんとか解けたとしましょう。

2 番目の質問ズーム レベルに応じてタイルを表示するには、以下のコードは正しいですか? または、コードがありませんか？

var BuildingsLayer = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        return "http://search.missouristate.edu/map/tilesets/baselayer/" + zoom + "_" + coord.x + "_" + coord.y + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
});

map.overlayMapTypes.push(BuildingsLayer);
4

1 に答える 1

10

自動タイルカッターを使用する代わりに、MapTilerを使用して推奨しました。画像をタイルにスライスするだけでなく、それを使用するためのjavascriptタイルスクリプトを生成します。

ただし、スクリプトはv2で記述されています。次のようにコードを編集できます。

v3タイルスクリプト

var maptiler = new google.maps.ImageMapType({ 
  getTileUrl: function(coord, zoom) { 
return zoom + "/" + coord.x + "/" + (Math.pow(2,zoom)-coord.y-1) + ".png"; 
}, 
  tileSize: new google.maps.Size(256, 256), 
  isPng: true 
}); 

var map; 

function initialize() { 
 map = new google.maps.Map(document.getElementById("map_canvas")); 
 map.setCenter(new google.maps.LatLng(36.07, -112.19)); 
 map.setZoom(11); 
 map.setMapTypeId('satellite'); 
 map.overlayMapTypes.insertAt(0, maptiler); 
}

クレジット

于 2011-01-18T09:59:47.397 に答える