Google Maps API V3 - Пользовательские плитки
-
15-10-2019 - |
Вопрос
В настоящее время я работаю над Google Maps API v3 Over здесь
Если вы увеличиваете масштаб от 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);
Решение
Вместо использования автоматического резака плитки я использовал и рекомендовал Maptiler. Не только он нарезает изображение на плитки, а также создает сценарий JavaScript Tiles для его использования.
Однако сценарий написан в V2. Вы можете редактировать коды в соответствии с:
V3 Tiles Script
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);
}