GoogleマップAPI V3-カスタムタイル
-
15-10-2019 - |
質問
私は現在、Googleマップ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);
解決
自動タイルカッターを使用する代わりに、Maptilerを使用して推奨しました。画像をタイルにスライスするだけでなく、JavaScript Tilesスクリプトも生成して使用します。
ただし、スクリプトは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);
}
所属していません StackOverflow