任何技术，preVIEW高清晰度的照片，可以放大和缩小像谷歌地图 [英] any technology to preview high definition photo, can zoom in and out like google maps

问题描述

我有一批高清晰度的图像，我想利用技术，如谷歌地图，查看图片，用户可以使用变焦平移来放大和缩小迅速，无需下载整个大的图片文件（他们只需要下载大图的视口）。

I have a batch of high definition images, and I want to make use of technologies like google maps to view the images, user can use zoom pan to zoom in and out quickly without downloading the whole big picture file(they only need to download the viewport of the big image).

我怎样才能做到这一点？

How can I do this?

感谢。 斌

推荐答案

如果有问题的图像实际上是一个地图或东西，可以合理地叠加到地图，使用MapTiler（http://www.maptiler.org/ ）将其分为地砖，然后用code这样的显示瓦：

If the image in question is actually a map or something that can be reasonably overlaid onto a map, use MapTiler (http://www.maptiler.org/) to split it into tiles, then use code like this to display the tiles:

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

需要注意的是地图瓦工设置图像名称的东西谷歌地图API V2具体。如果您使用的是3.0版（你也应该！），你必须采取每个文件的名称（例如，2001.png），并将其移动到一个文件名，这是很好的V3。要做到这一点在Linux或Mac，cd到瓷砖目录，然后运行该脚本（请注意，脚本假设你是在瓷砖DIR！）：

Note that Map Tiler sets the image name to something Google Maps API v2 specific. If you are using v3 (and you should!) you'll have to take each file name (e.g., 2001.png), and move it to a file name that's good for v3. To do that on Linux or a Mac, cd to the tiles directory and run this script (note that the script assumes you are in the tiles dir!):

#!/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

现在，即使你的形象是不实际的地图或者一些会被合理地覆盖在地图上，希望这给你去哪里找什么去戳周围，如果你想利用谷歌地图的一些想法。 （可能有工具，有让你轻松地构建这种类型的功能，而谷歌地图，但即便如此，我与他们没有经验。）

Now, even if your image is not actually a map or something that would be reasonably overlaid on a map, hopefully this gives you some ideas of where to look and what to poke around with if you want to leverage Google Maps. (There may be tools out there to let you easily build this type of functionality without Google Maps, but if so, I have no experience with them.)

这篇关于任何技术，preVIEW高清晰度的照片，可以放大和缩小像谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！