[翻译]Popfly系列课程6 – Popfly的地图Mashup之1:照片,金币及待售房屋

无论显示待售房屋的照片或当前的天气状况,超市与饭馆的位置,或者天然气价格以及暑假照片,照片mashup已经改变了人们使用互联网查看与展示信息的方式。这些数据告诉你一个故事。

本课描述了几种使用Microsoft Popfly构建地图mashup的方法。

Popfly的地图Mashup1:照片,金币及待售房屋

本课的Professor Popfly Mashups参考:

l WhereInTheWorld (http://www.popfly.com/users/professorpopfly/WhereInTheWorld )

l StateQuartersMap (http://www.popfly.com/users/professorpopfly/StateQuartersMap )

l RealEstateMap (http://www.popfly.com/users/professorpopfly/RealEstateMap)

l RealEstateLocalInfoMap (http://www.popfly.com/users/professorpopfly/RealEstateLocalInfoMap )

image

学习目标

完成本课学习后,你将可以:

l 获得地理标记数据并将其标记在地图上

l 掌握三种不同的在Virtual Earth上标记位置的技术

l 讲明适应地图标记的数据源

l 使用文本处理块与工具由RSS源提取位置数据

l 使用Popfly块将位置转化为与其一致的经纬度坐标

l 合并不同来源的数据到同一个Virtual Earth地图上。

概览

无论显示待售房屋的照片或当前的天气状况,超市与饭馆的位置,或者天然气价格以及暑假照片,照片mashup已经改变了人们使用互联网查看与展示信息的方式。这些数据告诉你一个故事。本课描述了几种使用Microsoft Popfly构建地图mashup的方法。

一些mashup仅需要一个单独的数据源(如片区照片,或者每个区域的汽油价格。)其它一些,如本文末尾的真实财产与wikipedia信息mashup,以及下一课中的”超级快餐点查找”mashup则合并来自不同数据源的数组以便在地图上标记。当完成两节mapping课程后,你便可以寻找家附近的印度餐馆,以及在相同的地图上展示冰川与雨林的照片。

本课一上来首先对制作地图mashup的Popfly块及其操作做一个概览。

Virtual Earth

Microsoft Virtual Earth是一个地图服务。使用Virtual Earth块来在地图上显示信息。

image

Virtual Earth块有三个操作来让用户在地图上用图钉表示一个位置:

l addPushpin: 基于经度与纬度向地图添加一个图钉

l addPushpinByLocation: 基于位置名称向地图添加一个名称

l addPushpinByAddress: 基于地址向地图添加一个图钉

addPushpin操作是最通用的,但是其将压力转到mashup设计器上 - 使用GeoNames块或者YahooGeoCoding块之一来将一个地址,城市,地区或者邮政编码转换为经纬度坐标。本课中使用geo-coordinates语句来查询经纬度坐标,并在这个geo标记过程中查找有这样坐标的数据。

后两个操作内部将一个位置(如“Bentley College”)或一个地址(如:“175 Forest Street, Waltham, MA”)转换为其对应的geo坐标并在地图上标记。

对于每一个在地图上标记的点,你可以给Pushpin指定一个自定义的图标的url,以及当鼠标移到图钉图标上时出现的标题及描述。如果你提供一个图片的Url,Popfly将使用这个图片作为图钉的图标图片,替代在不设置此值时默认的红色图钉图标。

Virtual Earth块有两个属性:

defaultZoomLevel:一个介于1(世界视图)到19(街景)之间的值。如果你正地图中标记本地数据,试一下一个中间值,如10。

usePhotoUriAsicon: 此属性默认值为true,表示url应该被用作pushpin的图标。

创建Map Mashups的技术

本课讨论了4种不同的创建地图mashup程序的技术。

l 示例1展示了使用提供包含已标记geo信息的数据的块创建mashup,如flickr,其包含一个getGeotaggedPhotoes操作。这些块直接连接到Virtual Earth。

l 示例2描述了当你拥有一个位置,城市或者地区信息,但不是其经纬度信息时怎样创建一个mashup。在这个例子中,使用GeoNames或者YahooGeoCoding,或者通过使用Virtual Earth的addPushpinByLocation或者addPushpinByAddress操作来创建mashup。

l 示例3展示了怎样通过文本处理技术从如Rss源的标题或描述中提取一个位置或地址来创建一个mashup。这种情况下位置信息不可以直接使用。一些文本处理是必需的以由原始数据中获取一个地址,城市,地区或者其它位置信息以查找地理坐标信息以便在Virtual Earth中标记。

l 示例4展示了怎样合并来自不同数据源的含有geo标记信息的数据集以便在同一个地图上显示它们。

示例1:使用标记Geo的数据创作地图Mashup – 构建一个Flickr地图

最简单的创建一个地图mashup的方式是使用已经包含经纬度信息的数据。

下面的表格列出了一些输出的每个项目中包含经纬度信息的Popfly块:

描述

flickr

getGeoTaggedPhotos返回包含相关经纬度信息的照片

IndeedJobs

检索职位描述;返回工作位置的经纬度信息作为IndeedJob对象信息的一部分

IPLocation

返回一个IP地址相关的位置

KingCountyBusTracker

获取King County, WA的公交线路位置

Phonebook

返回由Windows Live Phonebook中搜索到的与本地商业信息相关的数据。你需要输入一个点的经纬度,搜索将由地图上这个点开始,以及一个以英里为单位的半径值来限制搜索结果。

提示:使用GeoNames来获取给出的一个地名或邮政编码的经纬度信息。

RSS

一些RSS源标记有geo标签,返回的每个项目包含经纬度坐标

Upcoming

获取upcoming.org上事件列表中信息与位置

Wikipedia

搜索Wikipedia上有相关geo标签信息的文章

Yahoo Weather Block

检索一个指定邮政编码的气象信息

Yahoo! Traffic

获取美国任意位置的交通信息

简单的将这其中一个块连接到Virtual Earth。你也可以添加一个User Input块或者其它”set up”块,这样用户可以指定mashup的输入值。

Professor Popfly的WhereInTheWorld mashup使用这个技术来在地图上展现一个包含geo标记的照片:

image

image

注意,flickr块需要一个license key。这个mashup将查找20个城堡的照片并将它们显示在世界地图上相应的位置。

image

示例2:查找Geo坐标 – 构建一个州住所地图

如果你知道一个城市或州或地点的名称,但是不知道经纬度,你仍然可以通过调用Virtual Earth的addPushpinByAddress或addPushpinByLocation操作,或者使用GeoNames或YahooGeoCoding块来查询位置信息的方式制作一个地图mashup,这些Popfly块将位置信息转换为相应的经纬度坐标。

描述

GeoNames

拥有一个基于地点名,地址,城市与地区,或邮政编码来查找经纬度的操作。

YahooGeoCoding

拥有一个基于地址,或城市与地区来查找经纬度的操作。

某些情况下,GeoNames块返回0,0这个错误的经纬度值(这将使图钉恰好位于非洲的海岸。)这种情况可能是由于GeoNames的web服务关闭了,所以你可以尝试切换到YahooGeoCoding来代替。

这个例子创建了一个地图来展示一个洲的住处。本例中,将住处的地图以鼠标滑过并显示的方式来展示,而不是直接将住处的图片显示在地图上。数据来自United States信息块。

image

United States信息块包含了50个州住所的URL。

Simple Image块构建Html图片标签来展示图片,这用于鼠标划过地图上每个州时的标记时显示的描述。

YahooGeoCoding块接收首府与每个州,并查询相应的用于Virtual Earth的经纬度。

由于没有给Virtual Earth的URL属性指定值,mashup将使用默认的红色图钉。由YahooGeoCoding块给出的结果,Virtual Earth块的addPushpin操作在相应的位置放置一个图钉。

image

image

如果mashup使用Virtual Earth内部的addPushpinByAddress操作来代替(设置方式为上图右侧Virtual Eerth所示),则可以由mashup设计中移除YahooGeoCoding块。

当鼠标划过一个地图的图钉时,显示每个州的图片。

image

示例3:使用文本处理 – 构建一个真实的房产地图

许多RSS源提供了可以直接让你拿来使用的恰当格式的用于构建mashup的数据。例如,trulia.com是一个真实房产网站,其将真实的房产列表显示在地图上。在这个网站上你也可以订阅符合标准的住房(价格范围,卧室数目,等)的RSS源。

这个例子创建了一个真实的房产地图,其中用户可以输入要查询的地区的邮政编码,以及最低与最高的价格范围值。这个mashup显示满足这些条件的房子。

思考trulia.com,使用下面展示的设置,按此网站将搜索地址为邮政编码02451的区域且在250,000与300,000美元之间的房子。

image

这个网站同样也提供了RSS源类型的结果。注意RSS源的URL为:

http://www.trulia.com/rss2/for_sale/02451_zip/250000-300000_price/

由用户输入获得的3个值来构建这个URL并不麻烦:一个邮政编码,最低金额,与最大金额,然后使用3个TextAppender块来创建URL的不同部分并最终将它们串联在一起。

下面的图表展示了如何来配置这些块。指定操作的细节与它们的输入的细节留给读者考虑。

image

TextAppender(3)的输出是RSS源的完整URL。

检查RSS源项目。每一项的标题是固定资产的标记后面跟着价格。此处使用的文本的策略是使用$来分隔标题,这样$之前的内容均为地址,后面的内容为价格。当mashup提取出地址时,Popfly可以将其绘制在地图上。

image

如下是完成这个mashup的步骤。RSS块由前文所示的TextAppender(3)获取RSS源的URL。

image

Text Util块的splitGet操作接收标题的列表,在$处将它们分隔,并返回处理后的项目(如,$之前的项目为第一组)的列表(以0为起始索引)。

image

我们可以直接将输出的地址提供给Virtual Earth块的addPushpinByAddress方法来取代使用YahooGeoCoding块来计算经纬度值,并将处理结果输出到Virtual Earth以便绘制。然而,通过使用YahooGeoCoding块,我们将可以直接由真实不动产源来取得地理坐标。这在示例4中将很有帮助,那其中我们将真实的不动产数据与有相同邮政编码的地标相关的维基百科文章进行混搭。

image

Mashup使用TextAppender(4)块来创建以标题为文本,当点击时将用户转到相应的RSS源的项目的链接的超链接的HTML代码,而不是单单在地图运行时被触发时显示标题。

Virtual Earth块由YahooGeoCoding块获取经纬度,并使用http://www.iconarchive.com/icons/everaldo/desktoon/Home-48x48.png作为自定义的图钉图标的URL。image

Virtual Earth块默认的缩放等级被设置为13,因为这样显示的区域是一个街区的一组街道。如下是mashup运行时的输出。

image

示例4:由不同的源合并数据 – 向真实的房产地图添加本地信息

考虑你正搬到一个新的城市,除了要销售的房子,你还希望将本地地理信息放置到相同的地图上。完成这个需要将来自两个不同的数据源的数据(真实房产信息的RSS源与本地信息的数据源)进行混搭。

这个例子使用了Wikipedia块的geoSearchLocal操作来获取与你查找房屋,并将其添加到示例3创建的真实房产地图的邮政编码相同的区域的地理信息。最终完成的mashup为Professor Popfly’s RealEstateLocalInfoMap。

Pushpin List是一个包含了在地图上绘制的所需信息 – 经纬度,图钉图标的URL,与触发时显示的标题与描述的Pushpin项目的列表。VEPushpinListCreator块由一个单独数据源收集所有的坐标到Pushpin列表。

描述

VEPushpinListCreator

创建用于在Virtual Earth上绘制的pushpin信息的列表

VEPushpinListCreator块的createPushpin操作拥有与Virtual Earth的addPushpin操作(以及一些针对它们的附加的格式化选项)相同。如果你有两个不同的使用Virtual Earth的mashup需要合并:

打开第一个mashup,点击Virtual Earth块的”disconnect”

l 将第一个mashup的块连接到VEPushpinListCreator块

l 为第二个mashup块添加块,并将它们连接到一个VEPushpinListCreator块。

l 使用一个Combine块合并来自两个VEPushpinListCreator块的Pushpin列表。

l 将Combine块的输出连接到一个Virtual Earth块。

例如,要添加本地地理信息到示例3中创建的真实房产地图,添加这些块到这个mashup:

image

如下是VEPushpinListCreator块的createPushpin操作的输入的设置方式。按所示的输入格式并将可选项数据对象设为空。

image

Wikipedia块使用geoSearchNearby操作获取用户输入的邮政编码方圆5里内的10个相关项目。

VEPushpinListCreator(2)块由Wikipedia收集所有的本地信息并将结果输出为一个Pushpin列表,并使用这个信息图表http://www.iconarchive.com/icons/tpdkdesign.net/refreshcl/Symbols-Info-32x32.pngimage

Combine块合并两个VEPushpinListCreator块的输出的对象,然后VirtualEarth将两个Pushpin列表显示在同一个地图上。

image

image 

当mashup运行时,房子图标表示真实的房产信息来自之前的mashup,信息图标本地信息由Wikipedia块获取。

image

posted @ 2009-11-16 09:46  hystar  阅读(557)  评论(0编辑  收藏  举报