Google Maps API V3-自定义瓷砖
-
15-10-2019 - |
题
我目前正在研究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);
解决方案
我不使用自动瓷砖切割机,而是使用并推荐的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);
}
不隶属于 StackOverflow