任何预览高清照片的技术，都可以像Google地图一样放大和缩小

问题描述

|| 我有一批高清图像，我想利用Google Maps等技术来查看图像，用户可以使用缩放平移来快速放大和缩小，而无需下载整个大图片文件（他们只需要下载大图的视口）。 我怎样才能做到这一点？ 谢谢。 箱子     

解决方法

如果所讨论的图像实际上是地图或可以合理地覆盖在地图上的东西，请使用MapTiler（http://www.maptiler.org/）将其拆分为图块，然后使用如下代码显示图块：

var lat=37.767569;
var lon=-122.392223;
var initialZoom=17;
var tileDir = \'tiles_dir\';
var mapTypeId = \'Your Custom Map\';

var mapType = new google.maps.ImageMapType({
    tileSize: new google.maps.Size(256,256),getTileUrl: function(coord,zoom) {
        return \"img/\"+tileDir+\"/\"+zoom+\"/\"+coord.x+\"/\"+coord.y+\".png\";
    }
});
var map = new google.maps.Map(document.getElementById(\"map_canvas\"),{center:new google.maps.LatLng(lat,lon),mapTypeId:google.maps.MapTypeId.ROADMAP,zoom:initialZoom,mapTypeControl:false});
map.overlayMapTypes.insertAt(0,mapType);

map.mapTypes.set(mapTypeId,styledMap);
map.setMapTypeId(mapTypeId);

请注意，Map Tiler将图像名称设置为特定于Google Maps API v2的名称。如果您正在使用v3（应该这样做！），则必须使用每个文件名（例如2001.png），并将其移动到适合v3的文件名。要在Linux或Mac上执行此操作，请cd到tile目录并运行此脚本（请注意，该脚本假定您位于tile目录中！）：

#!/bin/bash

tiles=`ls -d */*/*`

for thisPath in $tiles
do
   thisFile=${thisPath#*/*/}
   oldY=${thisFile%.png}
   zoomX=${thisPath%/*}
   zoom=${thisPath%/*/*}
   newY=$(((1<<zoom) - oldY - 1))
   mv ${zoomX}/${oldY}.png ${zoomX}/${newY}.png
done

现在，即使您的图像实际上不是地图或可以合理地覆盖在地图上的东西，也希望它能给您一些想法，让您了解如果要使用Google Maps时应该在哪里寻找和寻找什么。 （可能有可用的工具可以让您无需使用Google Maps即可轻松构建此类功能，但如果是这样，我对它们没有任何经验。）     ,当然有Google地图。我是非常认真的：GMaps API允许您创建自定义地图类型，您需要给它一种方法，以给定的缩放级别显示\“ tiles \”（图像的一部分）。 我想做的最多的工作是在图像上以各种缩放级别创建“平铺”（将图像分成较小的矩形），但是我想这可以自动化。然后，由Google Maps的JavaScript脚本处理UI的拖动，缩放等操作。 （这可行，我使用Google Maps作为显示它的底层框架，使用这种自定义图块制作了一个桌游。）     ,我刚刚找到了这个非常漂亮的库：http://polymaps.org/