我有一批高清晰度图像,我想利用谷歌地图等技术来查看图像,用户可以使用缩放平移来快速放大和缩小,而不需要下载整个大图像文件(他们只需要下载大图像的视口)。
我该怎么做呢?
谢谢。箱子
发布于 2011-05-26 22:43:20
如果有问题的图像实际上是一张地图或可以合理地叠加到地图上的内容,请使用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到tiles目录并运行此脚本(请注意,该脚本假定您在tiles目录中!):
#!/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的情况下轻松地构建这种类型的功能,但如果是这样的话,我没有使用它们的经验。)
发布于 2011-05-26 17:48:13
当然也有谷歌地图。我是认真的: GMaps应用程序接口允许create custom map types,你需要给它一种方式来在给定的缩放级别显示“平铺”(图像的一部分)。
我认为最多的工作是从你的图像创建不同缩放级别的“平铺”(将图像分割成更小的矩形),但我认为这是可以自动完成的。然后由Google Maps的JavaScript脚本处理UI、拖动、缩放等操作。
(这是可行的,我已经用这样的自定义磁贴制作了一个棋盘游戏,使用Google Maps作为底层框架来展示它。)
发布于 2012-09-15 20:01:36
我刚刚找到了这个库,它非常漂亮:http://polymaps.org/
https://stackoverflow.com/questions/6136512
复制相似问题