您应该在更高的级别上工作,而不是1-3
缩放级别,并(0,0)
为图像选择其他原点而不是平铺。您需要的只是简单的数学。默认情况下,您的地图将以LatLng(0,0)
点为中心(正如您在 中提到的MapOptions
),计算将围绕该点执行。
理论
在任何缩放中,完全有2^zoom x 2^zoom
瓷砖:
zoom
_______________________ 2
|_|_|_|_|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|_|_|_|_|
|_|_|_|_|_|_|_|_|_|_|_|
zoom
2
与LatLng(0,0)
中心 GPS 点一样,包含该点的图块应该是 的中心图块tile-sheet
:
zoom
_______________________ 2
| |
| |
| | zoom
| | 2 zoom-1
| o----------|-------* ------ = 2
| |_| | 2
| | |
| | |
| | |
|__________|__________|
zoom |
2 | zoom-1
* 2
因此,在任何zoom
级别,中心图块都有(2^(zoom-1), 2^(zoom-1))
坐标。该图块将是origin
映射的。通过从当前图块的坐标中减去原点坐标,我们将得到这样的结果,例如coordinate-space
当我们在1-3
缩放级别中工作时以及原点是(0,0)
图块时。
执行
首先,选择更高的缩放级别,例如:
var MIN_ZOOM = 11,
MAX_ZOOM = 13;
映射将由getNormalizedCoord
函数完成:
function getNormalizedCoord(coord, zoom) {
//Amount of total tiles:
// MIN_ZOOM -> 1 tile
// MIN_ZOOM+1 -> 2 tiles
// MIN_ZOOM+2 -> 4 tiles
var totalTiles = 1 << (zoom - MIN_ZOOM),
y = coord.y,
x = coord.x;
var originx = 1 << (zoom-1),
originy = 1 << (zoom-1);
if(y < originx || y >= originx + totalTiles ||
x < originx || x >= originx + totalTiles){
return null;
}
x -= originx;
y -= originy;
return { x:x, y:y };
}
最后,ImageMapOptions
应该是:
var siteMapOptions = {
getTileUrl: function (coord, zoom) {
var normalizedCoord = getNormalizedCoord(coord, zoom);
if (normalizedCoord) {
return 'https://edocstorage.blob.core.windows.net/siteimages/2fa9fc72-23a7-41ed-86a1-b83a3ba04790/_siteTiles/tile_' +
(zoom-MIN_ZOOM) + '_' +
normalizedCoord.x + '-' +
normalizedCoord.y + '.png';
} else {
return 'content/tilecutter/empty.jpg';
}
},
tileSize: new google.maps.Size(256, 256),
maxZoom: MAX_ZOOM,
minZoom: MIN_ZOOM,
radius: 1738000,
name: "Site Plan"
};