Google Maps API V3 - пользовательские плитки - PullRequest
Новая
       55

Google Maps API V3 - пользовательские плитки

6 голосов
/ 04 января 2011

В настоящее время я работаю над 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

Первый вопрос Как найти значения X и Y в документе Photoshop?

Допустим, мне удастся решить первый вопрос.

Второй вопрос Правильный ли приведенный ниже код для отображения плиток в зависимости от уровня масштабирования? Или я пропускаю какие-либо коды? 

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);

1 Ответ

10 голосов
/ 18 января 2011

Вместо того, чтобы использовать автоматический резак плитки, я использовал и рекомендовал 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); 
}

Кредиты

...