首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >任何预览高清晰度照片的技术,都可以像谷歌地图一样放大和缩小

任何预览高清晰度照片的技术,都可以像谷歌地图一样放大和缩小
EN

Stack Overflow用户
提问于 2011-05-26 17:36:22
回答 3查看 2.1K关注 0票数 2

我有一批高清晰度图像,我想利用谷歌地图等技术来查看图像,用户可以使用缩放平移来快速放大和缩小,而不需要下载整个大图像文件(他们只需要下载大图像的视口)。

我该怎么做呢?

谢谢。箱子

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-05-26 22:43:20

如果有问题的图像实际上是一张地图或可以合理地叠加到地图上的内容,请使用MapTiler (http://www.maptiler.org/)将其拆分为平铺,然后使用如下代码显示平铺:

代码语言:javascript
运行
复制
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目录中!):

代码语言:javascript
运行
复制
#!/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的情况下轻松地构建这种类型的功能,但如果是这样的话,我没有使用它们的经验。)

票数 1
EN

Stack Overflow用户

发布于 2011-05-26 17:48:13

当然也有谷歌地图。我是认真的: GMaps应用程序接口允许create custom map types,你需要给它一种方式来在给定的缩放级别显示“平铺”(图像的一部分)。

我认为最多的工作是从你的图像创建不同缩放级别的“平铺”(将图像分割成更小的矩形),但我认为这是可以自动完成的。然后由Google Maps的JavaScript脚本处理UI、拖动、缩放等操作。

(这是可行的,我已经用这样的自定义磁贴制作了一个棋盘游戏,使用Google Maps作为底层框架来展示它。)

票数 1
EN

Stack Overflow用户

发布于 2012-09-15 20:01:36

我刚刚找到了这个库,它非常漂亮:http://polymaps.org/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6136512

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档