
GoogleMaps
毫无疑问,GoogleMaps是互联网上使用率最高的地图服务,许多
宁波网站建设都使用这项免费服务来提供图像化的位置显示,但GoogleMaps能做的远不止在地图上标记位置。
根据网站http://maps.google.com/hdp/maps/casestudies显示,大多网站正在使用GoogleMaps,其中包括了如NewYorkTimes(纽约时报)这一类的知名大企业。
GoogleMaps库的当前版本V3与之前有了很大不同:不再需要通过一个API密钥来使用它(意味着不需要在Google注册),并且此库针对移动设备使用进行了优化。如Google产品的一贯作风,其程序十分简单明了。以中欧的一幅简单交通地图为例,只需要几行HTML及〗avaScript便可完成,见代码清单。
代码溝单用GoogleMaps显示中欧交通地图
〈html〉
〈head〉
〈scripttype="text/javascript"src=http://maps.google.com/maps/api/jssensor=true,,〉
〈/script〉
〈scripttype=ntext/javascriptM〉window.onload=function(){varmap=newgoogle.maps.Map(document.getElementByld("map"),{center:newgoogle.maps.LatLng(47,ll),zoom:7,mapTypeld:google.mapsMapTypeld.ROADMAP});}
〈/script〉
〈body〉
〈divid="map"style=”width:%;height:%"〉〈/div〉
在载人库时,必须注明sensor(传感器)参数,若其被设为true,设备便能判断位置并通知应用程序,这在移动设备(譬如说带GPS的智能手机)上特别有用。整个页面加载(window.onload)完毕后,会创建一个google.maps.Map对象。传给构造器的第一个参数应该是一个HTML元素,用于显示地图,第二个参数是一系列配置项,用于决定地图上显示什么以及如何显示。在此案例中,地图被设为以北47°、东11°,缩放级别为7(缩放级别意味着显示整个地球),地图类型通过常数google.maps.MapTypeld.ROADMAP被标记为交通地图。
因为地图对象的构造器包含了对HTML页面内容的引用,因此它仅能在页面加载完'penStreetMap/OpenLayers^OpenStreetMap于4年面世,目的是成为一个广泛提供全球范围地理数据的免费平台。根据Wikipedia的摘录,其作用是让用户轻易地录下他们周边区域的地理要素并将这些要素在线保存。考虑到编辑地理数据的难处,该项目现状确实已经很了不起一数千用户在平台openstreetmap.org上传了他们的GPS数据,或针对网站数据给出纠错等意见。与此同时,拥有适当授权的现有地理数据也被收集到数据库中(例如USTIGER数据及Landsat7卫星图像)。
项目还衍生了一些工具,可以使用它们从OpenStreetMap下载数据,并被给予在服务器上上传和保存数据的权限I开放的接口让软件开发者能轻易地将自己的产品与系统集成。
OpenStreetMpa成功的一个重要原因是网页开发者可以借助OpenLayers项目轻松将地图整合在他们的网站上。它的JavaScript库并非限制用户只能使用OpenStreetMap,而是通过开放性的数据交互来体现它的强大。通过OpenLayers,你还可以访问Google、Microsoft、Yahoo!等不计其数的地理服务类地图(基于WMS及WFS标准)。
代码清单展示了用OpenLayers及OpenStreetMap显示中欧交通地图的例子:
代码清单用OpenStreetMap及OpenLayers显示中欧交通地图〈!D0CTYPEhtml〉
〈html〉
〈head〉
〈title〉Geolocation-OpenLayers/OpenStreetMap〈/title〉
〈scriptsrc=
’’http://www.openlayers.org/api/OpenLayers.js^x/script〉〈scriptsrc="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"〉
〈/script〉
〈script〉
window.onload=function(){
varmap=newOpenLayers.MapC'map");map.addLayer(newOpenLayers.Layer.0SM.0smarender("Osmarender"));varlonLat=newOpenLayers.LonLat(ll,47).transform(newOpenLayers.Proiection("EPSG:6"),mapgetProjectionObject())〉
map.setCenter(lonLat,7);
〈/script〉
〈body〉
〈divid=,,mapMstyle="top:0;left:0;bottom:0;right:0;position:fixed:Mx/div〉
〈/body〉
〈/html〉
在此案例中,我们需要载人openlayers.org和openstreetmap.org的两个JavaScript库。与GoogleMaps类似,也需要把一个HTMLdiv元素指派给OpenLayers.Map对象用于显示地图,并添加一个类型为osmarender的层---------这是openStreetMap的标准地图外观(OSM)。在此我们还要说明openStreetMap的一个重要特点:如节所述,三纬信息最终应以2D形式显示在屏幕上。尽管GoogleMaps用户仅需要用十进制度标识x及y坐标,不用为内在处理细节烦恼openLayers则需要用户先把十进制度转换成地图所用的坐标系的对应格式。OpenLayers(其实GoogleMap、Yahoo!Maps及MicrosoftBingMaps也一样)内在使用的都是一种投影坐标系,名为SphericalMercator(球形墨卡托投影,EPSG代码5)(译者注:也被称为WebMercator——Web墨卡托投影,区别于常规墨卡托投影,它把地球模拟为球体而非椭球体)。在SphericalMercator中,坐标是以米而非十进制度为单位,这也就是为什么这里的经纬度数字必须用traxisformO函数转化为地图所用的坐标系(由函数map.getProjectionObject决定)需要的格式,并为所用的投影坐标系指定EPSG代码(EPSG:6)。
本文由乐华网络编辑,转载请注明出处
宁波网站建设www.leseo.net