浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式]

为什么要取这样的一个题目呢？主要是因为今天去了一家公司和他们谈了谈，本来是指望做兼职的，谈到最后当然是不成了。去谈的是地图制作(可兼职)一职，要求是地图制图经验，最后加了个有WEBGIS开发经验。本来想自己毕业设计做的就是WEBGIS，而且对WEBGIS很感兴趣，最主要的是我从事的便是地图方面的工作，合情合理。最后谈下来是不需要我去制图而是需要我去搭建一个WEBGIS平台，跟他们谈了下MapInfo公司和ESRI的平台中间还谈了超图公司的平台还谈到了MapBar这样的地图网站，最后呢选择了象MapBar这样的平台(也不能算平台，只能说是原理)，因为他们本身的WEBGIS要求比MapBar还要简单。为什么不成我想现在也明白了吧，我是主攻地图数据这块的，让我搭建平台也行，但程序我就不行了，要是我会程序我早就把MapBar这样的网站给研究出来了。
其实两者的平台完全不一样，一个是基于矢量地图的发布一个是基于栅格地图的发布，个人觉得速度是栅格的要快，因为象MapBar这样的纯粹是把地图切割后无缝拼接(为什么要家个无缝呢，看灵图的地图就知道了，灵图的地图是有缝隙的)显示吗(我指的是MapBar的博客地图以及提供给百度的地图的实现部分就是运用这样原理实现的，但MapBar和MapABC他们的主平台并不是用这种原理实现的)，其实象Google Map API、灵图的API、E都市等网站实现的原理都是这样的，至少他们在客户端是这样用JS方法实现的，就那么四五千行的JS代码吗，其中线面状的图完全作为底图，图上看到的部分点也已经是图片了，不就是在MapInfo或者ArcInfo中将点线面的标注打开然后分幅保存成栅格图就OK了，地图显示部分就解决了，关于放大缩小在不同比例尺下显示那就是不同比例尺下截取不同的图而已，大比例尺截的图非常多，小比例尺就比较少了，不相信你自己可以下载MapBar里的世界地图，就是显示全世界的图，清空你的IE临时文件夹，然后拖拉世界地图看一遍整个世界地图，然后你再到你的IE临时文件夹去看，就是那么多幅的世界地图而已，大比例尺就很多了我就不多说了。至于查询到的点等信息，完全是建个数据库，这个数据库就比较丰富了，你可以包括点的名称信息等(比如公司名称公司介绍公司地址网站连接等等)，这个其实很重要，如果你在这个数据库上可以翻出花样来说不定就可以赚钱，但是，这些点需要两个最基本的字段，就是X坐标和Y坐标的值(可能是一个值，进行了加密的缘故吧)，至于样式什么的就简单了，你完全可以建个TYPE字段各个值对应一种样式就OK了(比如google提供的点有不同的颜色，我所说的样式便是指这些)。有了XY值就简单了，从数据库中读出来然后丢给JS就可以让JS在地图上标出准确的位置了，至于显示气泡框等这样的也就是数据库里传几个值让JS执行下就OK了(这里可以用对查询到的数据生成XML让JS读取或者用JSP等读取数据后直接生成JS代码，如果使用SQL server就很简单，一个查询语句就可以生成XML让JS调用了，超图的IS就是读XML数据的)。关于公交路线和驾车路线，这个比较麻烦，最短路径的算法我到现在还是不会，但有一点是可以肯定的，就是生成的路线其实是很多的点，把各个点连接起来就是线了，不相信你可以去百度地图着个换乘的路线看看，只是这个如何使用JSP来实现计算的我就不太清楚了。一个简单的WEBGIS模型就成型了，简单不？
可惜我不会技术那，所以我要一边骂技术更新太快而且不值钱一边骂自己水平太菜(其实也不能说技术更新太快，比如AJAX，其实就是JS+XML等，几年前就在大富翁论坛讨论过了)。所以我今天把这个框架写出来，希望这里的朋友能够联合起来成立个团队，写出自己的JS或者把MapBar的JS研究出来，并发布自己的API，搞定地图，写出网站程序，把这个WEBGIS平台给搭建起来，希望开源并能够运用到中小企业(当然这些需要在一份详细的计划书的前提下)。有兴趣的朋友可以多多讨论。
重点难点：
一：吃透JS代码(这JS代码里已经包含了放大缩小平移以及测量画线还有双击移动到中心等，地图显示部分就是完全靠这么多的JS)；
二：地图数据部分，坐标问题，如何转换，如何切图，切图后如何命名等，还有特殊点的坐标信息等录入数据库(需要根据JS里的算法以符合JS的算法，这是基础数据部分，看到的地图就是地图数据)；
三：网站程序部分，读取数据库，生成JS或者XML等。
讨论：
一：我上面所说的框架是否正确并可行？
二：从技术、速度等方面讨论基于栅格地图和基于矢量地图的WEBGIS优势和劣势，以及各平台的优劣。

[更新：Google Maps带来的新型WebGIS设计模式]
看了这篇文章觉得非常的好，非常的有深度，所以转了下，来自二度空间。
原文索引：http://spaces.msn.com/members/gemtang/Blog/cns!1p8Kzn8ffRJpPVVp4vlG3Vxg!195.entry
以下是引文：


其实早前我就说到Google Maps带来的轰动效应背后，少不了基于客户端浏览器的图片缓存技术的支持，我认为这是一种技术革新——因为任何常见的WebGIS商业产品都没有此种地图展现方式。




Go2map其实也很早就运用了该技术（去年推出新版本的VIP地图服务时），不过该地图服务仍然是基于MapInfo产品线的，不是很漂亮和高质量（起码跟Google比起来，道路少了灰色的border），而且界面稍显复杂（个人感觉）。使用客户端图片缓存后，很好的缓解了中心地图服务器的压力，要知道以前在Go2Map上查询北京的公交老是等待超时。




仔细分析一下Google Maps的内部机制（从界面上的操作体验中也可推断），此种WebGIS系统真的与以前的ArcIMS、MapXtreme等二次开发出来的系统有着本质的不同：


地图预先生成，这一点是首当其冲的，说了很多次了。


地图切片，客户端同时下载。当地图窗口发生移动、缩放时，便需要下载新的图片来填充新的区域，在这里充分利用了浏览器（如IE）的多线程同时下载的功能，另外，下载过的图片无需再次访问服务器下载。缺点就是客户端编写需要大量脚本来支持。


由于服务器不是实时地根据矢量数据生成地图图片，就造成了地图数据无法及时更新。但若仔细察看，不难发现Google Maps上的数据其实大部分是道路交通、行政边界，其他的POI(Point Of Interests)信息并不是固化在地图上的，如此便使人觉得地图稍显单调，好在高质量的卫片影像弥补了此不足。Google通过客户端脚本技术，把用户的搜索结果（也就是各种POI数据）以“大头针”图片的形式展现在客户端浏览器上，比如有名的官方Pizza店示例。反过来一想，还真得佩服Google的设计：POI数据是经常更新的，而基础数据（Framework dataset，比如高级别的道路、桥梁、城市、湖泊等）则是很少变动的，即便是某些小道路发生变化，也可以很方便的生成该范围的地图斑块，这个工作量是较小的。


上面提到了POI数据，其实它是动态生成的（当然，也可以是静态的），这个怎么说呢？好比Google的网络爬虫找到了某个公司的门户网站，分析出了该页面的内容结构并找到了其联系方式：##,**Road,**City，通过Geocoding技术便可在地图上找到其位置。


由于地图图片的预生成，以前的WebGIS站点经常提供的“图层控制”功能便无法达到，其实，这个并不影响用户的使用体验——Google地图是如此的清晰明了，用那玩意儿干啥？


抛弃“鹰眼”窗口，也就是那个缩略图，可能有人觉得用起来不太习惯——因为你不知道目前浏览到具体哪个位置了。但是，想想看：全世界的地图，当你放到到很细节的地方时，鹰眼上的显示框会多么的小啊，丝毫没有意义。


在地图上弹出Info Window以显示详细信息，底层实现使用了XML和XSLT，的确在界面上和视觉上给人以冲击，而且这也的确是一个好主意——既很好的节约了页面空间，又方便了用户操作。


“图中图”。该功能可谓煞费苦心，看看人家就是做得细致，在弹出的Info window中还有一个小地图来显示周围的情况，还可以在小地图上进行缩放，有点儿类似放置了一个放大镜在那里，真够绝的。


疯狂的运用Javascript脚本，恰好现在的Web设计又回归Javascript，特别是自AJAX的流行以来，似乎有唤醒了大家对浏览器端的脚本的重视。Google Maps的脚本可不是一段两段，而是超过了万行，就拿它在客户端显示路径这个功能来说，就必须牵涉到XML解析、路径数据的转码（Google在传输路径的位置坐标时作了编码处理）、VML渲染、如果非IE则需要访问服务器以便让服务器程序画出路径并回传图片……如此林林总总，不一而足。


Google在中国的本地搜索服务也推出了Beta公众试用版了，而且北京地区的图也很详细，我想最大的困难也许就是国内的地名解析吧，要知道国内的门牌号、街区号、邮政编码都不是划分的很清晰，这个属于城市规划建设的问题了~


GIS发展至今，经历了System-Science-Service几个阶段的蜕变，而且这三个过程的界线愈发明晰，象现在，就有人在做System，有人在做Science，有人在做Service，其实归根到底，它仍然是一种IT技术，个人认为无论搞科研，还是搞软件开发，又或者你是搞服务圈钱，都与计算机和网络是分不开的，不结合计算机技术，是搞不出任何新花样出来的~ 不多使用人家的软件，不多多看人家的代码、不多多多上人家的网站，就不知道人家究竟在捣鼓啥？


posted on 2006-01-14 17:40 浪人|努力 阅读(3452) 评论(23) 编辑 收藏 引用 网摘 所属分类: GIS



//Sys.WebForms.PageRequestManager._initialize('AjaxHolder$scriptmanager1', document.getElementById('Form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tAjaxHolder$UpdatePanel1'], [], [], 90);
//]]>

评论

其实做光栅类型的webgis很简单的。从老早的terraserver，到现在的google map和virtual eatrh。有耐心看看它们的js代码就一清二楚了。做这样的网站关键是能获取到数据源，技术上难度不是很大，关键就是高负载量下的优化和服务器集群技术了。 回复 更多评论


# re: 一边骂技术一边骂自己(浅谈WEBGIS运用栅格地图实现原理) 2006-01-18 17:59 liujun
贴一段生成img tag的代码的骨架：
function VE_MapTile(c,tx,ty,zl,ms,x,y,w,h)
{
this.c=c;
this.tx=tx;
this.ty=ty;
this.zl=zl;
this.ms=ms;
this.key=this._TileToQuadKey(zl,tx,ty);
this.f=this._BuildFilename();
this.id="tile_"+this.key;
......
var img=document.createElement("img");
this.img=img;
img.id=this.id;
img.style.position="absolute";
img.style.zIndex=VE_MapTile.baseZIndex;
img.style.cursor="pointer";
img.onmousedown=VE_MapControl._MouseDown;
img.onmouseup=VE_MapControl._MouseUp;
img.onmousemove=VE_MapControl._MouseMove;
img.onmousewheel=VE_MapControl._MouseWheel;
img.ondblclick=VE_MapControl._MouseDoubleClick;
img.oncontextmenu=VE_MapControl._ContextMenu;
img.src=this.f;
..........
var overlay=document.createElement("div");
this.overlay=overlay;
overlay.style.position="absolute";
............
overlay.innerHTML=this.key+"<br>"+tx+", "+ty;
}

_BuildFilename()就根据坐标和zoom level去生成对应的tiled图片文件url。 回复 更多评论


# re: 一边骂技术一边骂自己(浅谈WEBGIS运用栅格地图实现原理) 2006-01-22 14:24 muzik
可行 当然可行

我现在做的网站需要有地图标注 于是我今早跑去把googlemapAPI的文档看了一遍，申请了一个key测试了一下，很失望的发现在当我定位到成都的时候地图上一片空白——只有几条公路
于是我又去找yahoomapAPI，也是没有国内地图。在baidu搜索到灵图也提供API，于是看了一下，坦白说，我不是很喜欢。我希望它是google那样的
最后我不得不采取一个权益之计..我在mapbaidu看了一下，发现他调用地图都是用iframe调用的。

比如老兵鱼头，地址是
http://map.baidu.com/m?word=老兵鱼头&ct=10
该页面iframe如下地址
http://202.108.22.156/baidu/show.jsp?pid=MAPAYGJOXMYBFRDMZ">http://202.108.22.156/baidu/show.jsp?pid=MAPAYGJOXMYBFRDMZ
九转鱼头 地址
http://map.baidu.com/m?word=九转鱼头&ct=10
iframe
http://202.108.22.156/baidu/show.jsp?pid=MAPAYGSOJAZRFEDMZ">http://202.108.22.156/baidu/show.jsp?pid=MAPAYGSOJAZRFEDMZ

如果要同时显示老兵鱼头和九转鱼头，iframe
http://202.108.22.156/baidu/show.jsp?pid=MAPAYGJOXMYBFRDMZ">http://202.108.22.156/baidu/show.jsp?pid=MAPAYGJOXMYBFRDMZ;MAPAYGSOJAZRFEDMZ
图中A是老兵，B是九转

很显然，它的方式是给每一个标注位置一个pid，这个位置对应着一个keyword。如果它这种方式短时间内不改变的话，我可以调用它。

最后我就用了这种愚蠢的方式，比如，我在我的数据库里读取到一个
$title='老兵鱼头';
然后我给$title转码
$title=rawurlencode($title);
设置一下这个$title对应的baidumap地址
$reurl='http://map.baidu.com/m?bs=028_0&word='.$title.'&ct=21';
取得远程文件内容
$file = file_get_contents($reurl);
//打开失败
if (!$file) {
echo "<p>Unable to open remote file./n";
}
//正则查找“m?sid=”加15位字母编号
preg_match("/m?sid=/w{15}/",$file,$matches);
if (!$matches) {
echo "<p>Unable to get Date./n";
}
$filer=$matches[0];
//去掉m?sid=,得到15位编码
$filer=substr($filer,4,15);

到这时候我可以在自己的页面上iframe
http://202.108.22.156/baidu/show.jsp?pid=$filer

坦白说，这样调用真是麻烦吖，一则连续的去fopen他的地址会被拒绝，二则我本地数据的$title和它那里多有不同——不同就没有返回。。。闹的我都想自己搞个地图来用了，于是在baidu搜索webgis找到这里..希望仁兄多努力哈，哪天API搞出来了造福一下我罢 - - 哈

另，我以后如果有地图方面不懂的地方就来留言，尚望不吝赐教。 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-02-22 16:20 老葛
有没有兴趣一起研讨？

msn:
sjge@hotmail.com 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-02-23 17:11 白晓哲
问问大家：
google map 的客户端 为什么不用 applet来实现呢，
用applet多简单啊
applet的一个运行环境才5M 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-02-23 19:16 浪人|努力
@白晓哲
看来贵兄是个JAVA高手啊，是否有空也个JAR出来呢？是蛮简单的，得到服务器上矢量数据而且可以在applet里进行着色美化等，觉得是蛮好的，MAPBAR的部分以及MAPABC都有这样的东西。
可能GOOGLE考虑了其他因素吧，相信一个applet的启动其实是比较慢的。也许直接访问栅格图片比用applet进行传输数据后再进行渲染等操作也许就要比栅格地图来的慢了。 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-02-24 10:08 白晓哲
@浪人|努力

你好，如果您的浏览器没有java虚拟机的话，您访问mapbar的时候您是看不到applet的效果的，在地图框的下面有个连接：“矢量数据”，点这个是用applet来浏览地图，如果您没装jvm，这个页面是打不开的，如果装了jre在浏览地图就自动启动applet显示地图，显示速度还是比javascript稍快的，由于用的是矢量地图，地图上的路桥名称还会移动来自适应窗口

mapbar 提供的jre: http://www.map666.com/msjavx86.exe 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-03-08 16:01 邓石
图片的检索效率业值得思考

liujun说的高负载量下的优化和服务器集群技术不知道能不能深入探讨一下？

特别是服务器集群技术 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-03-27 17:50 yukai zhao
我也在研究google的地图呢 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-05-12 22:21 zkjbeyond
http://www.blogjava.net/Files/zkjbeyond/myDojo.rar

ie下正常 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-06-15 13:25 minux
那么，对于一个栅格地图，怎么在上面标识出xx路xx号在哪个位置？如果不用矢量地图，这个很难把。。。 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-06-15 20:25 浪人|努力
@minux
和vrgis问的性质差不多。这应该是一个Address属性，也是存在数据库的，如果搜索到这个地址，那么提取这个记录的坐标，就可以显示到地图了。 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-06-16 12:08 minux
@浪人|努力
如果有坐标或者地址信息，的确可以很快从数据库中读出显示出来。而这个address属性是怎么得出来的呢？难道，其显示用的是栅格地图，而背后的坐标计算和记录还是基于矢量地图的？ 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-06-16 19:12 浪人|努力
@minux
没有矢量地图哪里来栅格地图？？？
地址什么的都是保存到数据库了，不可能你想象的那么简单，就算是矢量的他也会放到数据库里。 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-06-20 11:29 minux
@浪人|努力
这样说来，一般搞GIS map的这种矢量地图上的地址数据哪里来呢？好像测绘局什么的也不对外提供吧。。。 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-06-20 18:16 浪人|努力
@minux
地图公司路测。
有人出钱肯定有公司会做。 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-07-10 15:14 ihuke
一直都很困惑，就是如何添加标记到地图中，以方便information信息的现实：
1、另用div之类的添加，如超图的MapControl可以添加自定义的层，但这样问题也就来了，因为这是在地图加载时就要完全添加进去的，如果标记数量巨大，那一次添加对整个程序的效率的影响应比较大。Goole Map可用XML来添加，同样在量大的情况该怎么处理？怎样实现按需加载，在一定显示比例，只加载一定范围的标记？
2、可能是在GIS图中即已含有相关的信息，鼠标单击可获取
3、把页面像素坐标转换为地图坐标，用坐标来查询
3、其它方式

我刚刚开始学习WebGIS的开发，实在是不懂，请各位大虾和楼主指教，给些思路，谢谢！！！ 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-07-10 18:24 浪人|努力
@ihuke
1。说不清楚，但觉得不会全部加载，就如同你的查询结果，先显示十项则加载十项，查询到后十项的时候就再加载。可以看mapbar等的查询功能就是如此。
2。应该讲这个容器是有属性的，你单击容器的时候是可以得到他的许多属性的。
3。屏幕坐标和真实坐标之间的转换比较容易。 回复 更多评论


# 公告：Rover's Official Blog停止更新[TrackBack] 2006-08-05 04:31 浪人|努力
想了几天，终于决定写这么一个公告了。并不是因为写些东西太累或者太占时间而停止了更新，也许就如同前文说是因为今天喝多了酒(呵呵，玩笑)，也许如同MSN副标题所言：严重的压力和抑郁，强烈的人格分裂和精神分... 查看原文 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2006-11-12 23:14 一个勤勉的草根
各位大虾 能否问一下大致了解你们的谈话需要学些什么@yukai zhao
回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2007-02-10 10:58 dlsf
是浅谈了一下，具体技术现在已经不是问题了。研究的人是比较多，也已经成功应用了。google map api可以结合传统的GIS软件，做的更好。 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2007-03-27 15:24 懒懒
欢迎入群学习mapbar
qq群：25959894 回复 更多评论


# re: 浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式] 2007-03-27 15:25 懒懒
请注明如群目的，否则不予批准。 回复 更多评论

# re: 一边骂技术一边骂自己(浅谈WEBGIS运用栅格地图实现原理) 2006-01-18 17:51 liujun