谷歌地图API V3 - 自定义瓦片

Question

我目前正在使用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的值？

假设我已经解决了第一个问题。

第二个问题 以下代码是否正确显示瓷砖，取决于缩放级别？或者我是否遗漏了任何代码？

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

- silverbtf

Answer 1

我建议使用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); 
}

Credits

- silverbtf

---

最新版本的MapTiler可以从http://www.maptiler.com/获得，它自动支持Google Maps V3。不再需要更改JavaScript代码。 - MapTiler

MapTiler在每张图片中都添加了“MapTiler”字样，非常烦人，这破坏了我的图片。建议您下载命令行工具GDAL代替。 - eLouai