浅谈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技术，个人认为无论搞科研，还是搞软件开发，又或者你是搞服务圈钱，都与计算机和网络是分不开的，不结合计算机技术，是搞不出任何新花样出来的~ 不多使用人家的软件，不多多看人家的代码、不多多多上人家的网站，就不知道人家究竟在捣鼓啥？
<script type="text/javascript"> // </script>
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.οnmοusedοwn=VE_MapControl._MouseDown;
img.οnmοuseup=VE_MapControl._MouseUp;
img.οnmοusemοve=VE_MapControl._MouseMove;
img.onmousewheel=VE_MapControl._MouseWheel;
img.οndblclick=VE_MapControl._MouseDoubleClick;
img.οncοntextmenu=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。 回复 更多评论
我现在做的网站需要有地图标注 于是我今早跑去把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搞出来了造福一下我罢 - - 哈
另，我以后如果有地图方面不懂的地方就来留言，尚望不吝赐教。 回复 更多评论
msn:
sjge@hotmail.com 回复 更多评论
google map 的客户端 为什么不用 applet来实现呢，
用applet多简单啊
applet的一个运行环境才5M 回复 更多评论
看来贵兄是个JAVA高手啊，是否有空也个JAR出来呢？是蛮简单的，得到服务器上矢量数据而且可以在applet里进行着色美化等，觉得是蛮好的，MAPBAR的部分以及MAPABC都有这样的东西。
可能GOOGLE考虑了其他因素吧，相信一个applet的启动其实是比较慢的。也许直接访问栅格图片比用applet进行传输数据后再进行渲染等操作也许就要比栅格地图来的慢了。 回复 更多评论
你好，如果您的浏览器没有java虚拟机的话，您访问mapbar的时候您是看不到applet的效果的，在地图框的下面有个连接：“矢量数据”，点这个是用applet来浏览地图，如果您没装jvm，这个页面是打不开的，如果装了jre在浏览地图就自动启动applet显示地图，显示速度还是比javascript稍快的，由于用的是矢量地图，地图上的路桥名称还会移动来自适应窗口
mapbar 提供的jre: http://www.map666.com/msjavx86.exe 回复 更多评论
liujun说的高负载量下的优化和服务器集群技术不知道能不能深入探讨一下？
特别是服务器集群技术 回复 更多评论
ie下正常 回复 更多评论
和vrgis问的性质差不多。这应该是一个Address属性，也是存在数据库的，如果搜索到这个地址，那么提取这个记录的坐标，就可以显示到地图了。 回复 更多评论
如果有坐标或者地址信息，的确可以很快从数据库中读出显示出来。而这个address属性是怎么得出来的呢？难道，其显示用的是栅格地图，而背后的坐标计算和记录还是基于矢量地图的？ 回复 更多评论
没有矢量地图哪里来栅格地图？？？
地址什么的都是保存到数据库了，不可能你想象的那么简单，就算是矢量的他也会放到数据库里。 回复 更多评论
这样说来，一般搞GIS map的这种矢量地图上的地址数据哪里来呢？好像测绘局什么的也不对外提供吧。。。 回复 更多评论
地图公司路测。
有人出钱肯定有公司会做。 回复 更多评论
1、另用div之类的添加，如超图的MapControl可以添加自定义的层，但这样问题也就来了，因为这是在地图加载时就要完全添加进去的，如果标记数量巨大，那一次添加对整个程序的效率的影响应比较大。Goole Map可用XML来添加，同样在量大的情况该怎么处理？怎样实现按需加载，在一定显示比例，只加载一定范围的标记？
2、可能是在GIS图中即已含有相关的信息，鼠标单击可获取
3、把页面像素坐标转换为地图坐标，用坐标来查询
3、其它方式
我刚刚开始学习WebGIS的开发，实在是不懂，请各位大虾和楼主指教，给些思路，谢谢！！！ 回复 更多评论
1。说不清楚，但觉得不会全部加载，就如同你的查询结果，先显示十项则加载十项，查询到后十项的时候就再加载。可以看mapbar等的查询功能就是如此。
2。应该讲这个容器是有属性的，你单击容器的时候是可以得到他的许多属性的。
3。屏幕坐标和真实坐标之间的转换比较容易。 回复 更多评论
回复 更多评论
qq群：25959894 回复 更多评论
# re: 一边骂技术一边骂自己(浅谈WEBGIS运用栅格地图实现原理) 2006-01-18 17:51 liujun
浅谈WEBGIS运用栅格地图实现原理[更新:Google Maps带来的新型WebGIS设计模式]相关推荐
- 最佳网络地图服务对比分析:Google Maps 与 OpenStreetMap
有人说:一个人从1岁活到80岁很平凡,但如果从80岁倒着活,那么一半以上的人都可能不凡. 生活没有捷径,我们踩过的坑都成为了生活的经验,这些经验越早知道,你要走的弯路就会越少. 就制图师而言,Goog ...
- 【第一章】浅谈游戏作弊类型与核心原理
浅谈游戏作弊与核心原理 导语 外挂发展史 外挂核心以及原理 本章总结 下期预告 建议收藏此专栏以免迷路 导语 为什么有的人说游戏外挂开发门槛极低,但为什么又有的人说游戏外挂开发门槛极高? 只有了解了外 ...
- 服务器不知别内存_程序优化浅谈服务器实现高并发的原理
我们每天刷手机都会接收到各种各样的信息,看到这篇文章时,不知大家有没有思考过,这些信息是如何组织,然后通过服务器发送给我们的呢? 其实也很简单,不就是一条一条请求嘛,服务器根据不同的请求分别去不同的数 ...
- 谷歌地图开发使用记录 Google Maps
谷歌地图开发文档 申请谷歌地图密钥 可参考此链接https://blog.csdn.net/edsoki/article/details/123391685 https://www.wppop.com ...
- 【浅谈】四种无线定位原理及算法
1.聊一聊 本文主要是跟大家简单谈谈4种无线定位技术,同时今天分享的歌曲比较欢乐,有空可以听听. 2.正文部分 1 无线定位技术 目标定位一直是一项不断发展且热门的技术,为什么这么热门呢 ? 当然是大 ...
- 浅谈汽车车载导航仪GPS地图安装配置常见错误的解决方法（如提示缺少Style.ini等）
如今汽车GPS导航仪产品已经非常成熟了,根据功能的多少价钱基本在600-2800元之间,一般而言,家庭买一款800元左右的导航仪已经足够用了. 现在以中关村最常见的e道航为例,简要谈一谈GPS外置SD ...
- java+caching+system_浅谈Spring boot cache使用和原理
缓存要解决的问题:一个程序的瓶颈在于数据库,我们也知道内存的速度是大大快于硬盘的速度的.当我们需要重复地获取相同的数据的时候,我们一次又一次的请求数据库或者远程服务,导致大量的时间耗费在数据库查询或者 ...
- 浅谈 instanceof 和 typeof 的实现原理
typeof 实现原理 typeof 一般被用于判断一个变量的类型,我们可以利用 typeof 来判断number, string, object, boolean, function, undefi ...
- 浅谈巴拿马电源的谐波消除原理
摘要:以巴拿马电源的 36 脉波移相整流为对象建立模型,使用 MATLAB-simulink工具进行模拟仿真,通过对比网侧和阀侧的谐波含量.电流和电压波形,阐述其 谐波消除的原理.仿真结果表明,该巴拿 ...
最新文章
- hive删除hbase数据_Hive进阶：Hive通过外部表操作Hbase数据
- 如何固化预训练模型的参数
- Divide and conquer:K Best(POJ 3111)
- 霸榜COCO和Cityscapes！南理工CMU提出极化自注意力，更精细的双重注意力建模结构
- Scrapy从理论到爬图
- UITabBarController 标签栏控制器－IOS开发 （实例）
- HTML-列表、表格、表单
- virtio 网络的演化：原始virtio ＞ vhost-net(内核态) ＞ vhost-user(DPDK) ＞ vDPA
- SAP License：更改物料基本计量单位
- 软件测试方法-测试用例
- MEGA-X 3D打印机教程：05_更换步进电机驱动
- 绿盟科技实习安服面经
- python语言例子_第一个Python实例
- Android 将本地资源图片转换成Drawable，进行设置大小
- oracle常用分析函数与聚合函数的用法
- psychopy_免费和有用的软件– PsychoPy
- 实时操作系统与分时操作系统的区别
- Spark Job Submit分析
- L1-039 古风排版-java
- 如何加速 LaTeX 编译
评论
回复 更多评论