Google 地图 API V3 - 自定义图块

发布于 2024-10-10 18:47:42 字数 975 浏览 5 评论 0原文

我目前正在此处开发 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);

原文

I am currently working on Google Maps API V3 over here

If you zoom between 21 to 23, there will be an image overlay on the map. The image takes too long to load and I have decided to break it into different tiles for easier loading. I am using Automatic Tile Cutter to cut the image into tiles.

I have problems with the script;

    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

First question How do you find the values of X and Y from the photoshop document?

Let say if I manage to solve the first question.

Second question Is the below code correct to display the tiles depending on the zoom level? Or am I missing any codes?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长不大的小祸害 2024-10-17 18:47:42

我没有使用自动瓷砖切割机，而是使用并推荐了 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); 
}

制作人员

Instead of using Automatic Tile Cutter, I used and recommended MapTiler.
Not only it slices the image into tiles and it also generates out a javascript tiles script to use it.

However, the script is written in v2. You can edit the codes according:

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

Credits

回复收藏 0 原文

~没有更多了~