Google Maps API V3 - 自定义图块

Posted 2023-05-08

【中文标题】Google Maps API V3 - 自定义图块

【英文标题】：Google Maps API V3 - Custom Tiles

【发布时间】：2011-06-03 13:17:33

【问题描述】：

我目前正在通过here 开发 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);

【参考方案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

【讨论】：

最新版本的 MapTiler 可从：maptiler.com 自动支持 Google Maps V3。不再需要更改 JavaScript 代码。

maptiler 在每个图像中都添加了“maptiler”，非常烦人，并且毁了我的图像。建议你下载命令行工具GDAL代替。