地图叠加层概述(二)

1、（2）地图叠加层概述（二）折线GPolyline对象可在地图上创建线性叠加层。GPolyline包括一系列点，并创建一系列有序连接这些点的线段。绘制折线折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色应是十六进制数字HTML样式，例如使用#ff0000而非red。GPolyline无法识别命名颜色。GPolyline对象使用浏览器的矢量绘制功能（如果可用）。在InternetExplorer中，Google地图使用VML（请参阅XHTML和VML）绘制折线；在其他浏览器中使用SVG（如果可用）。在所有其他环境中，我们从Google服务器请求一个线段图像并将该图像叠加

2、到地图上，当地图缩放和拖动时按需要刷新图像。以下代码段会在两点之间创建10像素宽的红色折线：viewplaincopytoclipboardprint?varpolyline=newGPolyline(newGLatLng(39.9493,116.3975),newGLatLng(39.9593,116.4071),#ff0000,10);map.addOverlay(polyline);查看示例(polyline-simple.php)测地折线在地图上表示的折线是符合当前投影的直线。即它们在地图上显示为直的，但实际上可能没有正确考虑到地球的弧度。如果想绘制测地线(“大圆球”的一段，表示地球表

3、面上两点之间的最短距离)，则需要通过GPolyline的GPolylineOptions参数传递geodesic:true。GPolylineOptions对象是一个对象常量的示例。如果使用对象常量，则无需构造对象。而是可以将参数作为一系列名/值对在花括号中传递。对象常量经常用于不需要实例化对象的情况。viewplaincopytoclipboardprint?varmap=newGMap2(document.getElementByIdx_x(map_canvas);map.setCenter(newGLatLng(37,107),2);/CreateGPolylineOptionsargu

4、mentasanobjectliteral./Notethatwedontuseaconstructor.varpolyOptions=geodesic:true;varpolyline=newGPolyline(newGLatLng(50,120),newGLatLng(30,100),#ff0000,10,1,polyOptions);map.addOverlay(polyline);查看示例(polyline-geodesic.php)编码折线Google地图中的GPolyline对象将直线表示为一系列点，使其易于使用但不一定紧凑。长线和复杂的线需要大量内存，绘制起来也需要更长时间。同时

5、，在地图上绘制非编码折线中的线段时，不会考虑较大缩放级别时的分辨率。Google地图API可让您使用编码折线表示路径，编码折线使用ASCII字符的压缩格式在GPolyline中指定一系列点。编码折线还可让您指定绘制线段时应忽略的缩放级别组，这样您就可以指定一条折线在指定缩放级别的详细程度。尽管编码折线设置起来更困难，但它们可使您更高效地绘制叠加层。例如，3个点的GPolyline(两条线段)通常表示为：viewplaincopytoclipboardprint?varpolyline=newGPolyline(newGLatLng(39.9493,116.3975),newGLatLng(39

6、.9593,116.4071),newGLatLng(37.4619,-122.1819),#FF0000,10);map.addOverlay(polyline);这些点的编码GPolyline如下所示(眼下先不考虑编码算法的特殊要求)。viewplaincopytoclipboardprint?varencodedPolyline=newGPolyline.fromEncoded(color:#FF0000,weight:10,points:yzocFzynhVqnonzD,levels:BBB,zoomFactor:32,numLevels:4);map.addOverlay(encod

7、edPolyline);关于此代码要注意两点。第一，各系列点在编码折线中表示为一系列ASCII字符，而在基本GPolyline中却使用常见的经度和纬度。将这些点创建为一系列编码ASCII值的算法位于此处。如果要通过服务器进程动态计算编码折线(举例而言)，则需要此算法。但是，如果只想要转换现有点指定的经度和纬度，则可以使用我们的交互实用工具。第二，编码折线还允许您指定每个线段在Google地图上绘制自身的最大缩放级别。如果在较高的缩放级别上未显示某个点，则只绘制先前可显示的点到下一个可显示的点之间的路径。请注意，此特性在非编码GPolyline中不可用，它在以下情况下特别有用：允许在高缩放级别(

8、某些线段的细节可能不相关)下快速绘制。例如，当地图缩小到州级别时，表示从纽约到芝加哥行车路线的编码折线应不关心表示曼哈顿特定街道的线段。查看示例(polyline-encoding.php)多边形GPolygon对象类似于GPolyline对象，因为它们都包括一系列有序的点。但是，多边形不像折线一样有两个端点，而是设计为定义形成闭环的区域。和折线一样，您可以自定义多边形边（线）的颜色、粗细和透明度，以及封闭的填充区域的颜色和透明度。颜色应是十六进制数字HTML样式。GPolygon对象类似于GPolyline对象，使用浏览器的矢量绘制功能（如果可用）。下面的代码段用四个点创建一个10像素宽的方

9、框。请注意，此多边形是“封闭的”，即线段路径的终点与始点重合；始终应闭合多边形以避免发生未定义的行为。viewplaincopytoclipboardprint?varmap=newGMap2(document.getElementByIdx_x(map_canvas);map.setCenter(newGLatLng(39.9493,116.3975),13);map.addControl(newGSmallMapControl();GEvent.addListener(map,click,function(overlay,latlng)varlat=latlng.lat();varlon=

10、latlng.lng();varlatOffset=0.01;varlonOffset=0.01;varpolygon=newGPolygon(newGLatLng(lat,lon-lonOffset),newGLatLng(lat+latOffset,lon),newGLatLng(lat,lon+lonOffset),newGLatLng(lat-latOffset,lon),newGLatLng(lat,lon-lonOffset),#f33f00,5,1,#ff0000,0.2);map.addOverlay(polygon););查看示例(polygon-simple.php)底面叠

11、加层多边形是非常有用的叠加层，可表示任意大小的区域，但不能显示图像。如果您有一个要放置在地图上的图像，可以使用GGroundOverlay对象。GGroundOverlay的构造函数将图像的网址和图像的GLatLngBounds作为参数。下面的示例将美国新泽西州纽华克的旧地图作为叠加层放在地图上：viewplaincopytoclipboardprint?varmap=newGMap2(document.getElementByIdx_x(map_canvas);map.setCenter(newGLatLng(36.0,113),12);/groundoverlayvarboundaries

12、=newGLatLngBounds(newGLatLng(35.5,112),newGLatLng(36.5,114);varoldmap=newGGroundOverlay( HYPERLINK /maps/historical/ne /maps/historical/newark_nj_1922.jpg,boundaries);map.addControl(newGSmallMapControl();map.addControl(newGMapTypeControl();map.addOverlay(oldmap);查看示例(groundoverlay-simple.php)图块叠加层Go

13、ogle地图API中的地图在每个缩放级别都包含一组图块，涵盖地球的整个表面。每种地图类型使用的图块有：G_NORMAL_MAP、G_SATELLITE_MAP、G_HYBRID_MAP和G_PHYSICAL_MAP。图块不一定在所有缩放级别中都涵盖所有区域。例如，太平洋的许多区域在高缩放级别中不显示。在最低的缩放级别(级别0)，一个图块表示整个地球。每个后继的缩放级别将地图分成4N个图块，其中“N”代表缩放级别。例如，在缩放级别1，Google地图将世界分为2x2网格，共4个图块；在缩放级别2，Google地图将世界分为4x4网格，共16个图块，以此类推。如果要修改这些图块的显示，您有两种选择

14、：使用GTileLayerOverlay在现有的地图类型上实现您自己的图块叠加层使用GMapType实现您自己的自定义地图类型第一种情况简单得多，但使用较受限制，而第二种情况可让您在应用中对显示进行更多控制。下面讨论了这两种情况，但是本文档中未讲述怎样完全实现自定义地图类型。每一种情况都需要从GTileOverlay接口实现三种抽象方法：getTileUrl()会向地图返回包含图块的网址(传递GPoint和缩放级别的情况下)。isPng()会向地图返回Boolean，表示图像是否为PNG文件(PNG文件可以透明地显示)。如果为true，则假定该图像为PNG。getOpacity()返回0.0和

15、1.0之间的值，表示显示此图像的透明度级别。我们将在接下来的两部分中讨论这些不同的方法。图块层叠加层如果要在现有地图类型上显示叠加层，请使用GTileLayerOverlay对象。此对象要求您创建GCopyrightCollection，并将其与图块层相关联，以表示允许使用该图像（或这些图像）。以下代码在每个图块的所有缩放级别上显示一个简单的透明叠加层，使用浮动十字光标表示图块的轮廓。viewplaincopytoclipboardprint?/Setupthecopyrightinformation/Eachimageusedshouldindicateitscopyrightpermiss

16、ionsvarmyCopyright=newGCopyrightCollection(?);myCopyright.addCopyright(newGCopyright(Demo,newGLatLngBounds(newGLatLng(-90,-180),newGLatLng(90,180),0,?2007Google);/Createthetilelayeroverlayand/implementthethreeabstractmethodsvartilelayer=newGTileLayer(myCopyright);tilelayer.getTileUrl=function()retur

17、n./include/tile_crosshairs.png;tilelayer.isPng=function()returntrue;tilelayer.getOpacity=function()return1.0;varmyTileLayer=newGTileLayerOverlay(tilelayer);varmap=newGMap2(document.getElementByIdx_x(map_canvas);map.setCenter(newGLatLng(39.9493,116.3975),13);map.addOverlay(myTileLayer);查看示例(tileoverl

18、ay-simple.php)自定义地图类型如果觉得GTileLayerOverlay太受限制，则您可以定义自己的自定义地图类型，并开发全新的显示样式。要执行此操作，请构造一个GMapType对象，并使用GMap2.addMapType()方法将其添加到地图。从头构造地图类型是一个复杂的过程。您需要构建一种方式，在提供当前图标的情况下，定义和检索在地图上显示的动态数据，并需要确定怎样引用和显示图块。您怎么做由您自己决定，但我们可以通过说明Google地图怎样实现其图块引用来向您提供一些帮助。层GLayer对象是叠加层对象，存储第三方地理信息集合。“层”是地理相关功能的集合，可共享某些常用函数，在

19、地图上显示为一个组。Google通过从其他源获取的数据提供这些集合，并将它们包含在一个层内。层通常包含多种项目，通常有标记、折线和多边形，但是这些项目不被视为单独对象。层自身(及其所有组件)被视为地图API的一个叠加层，通过标准addOverlay()方法添加到地图。层还可以进行交互，例如，可对组件执行操作以调出信息窗口。每个层均包含唯一的命名空间ID，以便可以轻松地引用、唯一地定位它们。命名空间ID当前基于源层的域。例如，英文的“GeotaggedWikipedia?Articles”层的命名空间ID为_I_I_“org.wikipedia.en”。Google地图API当前可以访问这些公共

20、层。会定期将新的层添加到地图API。我们会维护此电子表格中的这个列表。以下代码段会将英文的“Wikipedia”层添加到纽约城格林威治村：viewplaincopytoclipboardprint?functioninitialize()if(GBrowserIsCompatible()varmap=newGMap2(document.getElementByIdx_x(map_canvas);map.setCenter(newGLatLng(39.90822,116.4055),13);varmyLayer=newGLayer(org.wikipedia.en);map.addOverlay

21、(myLayer);查看示例(layer-simple.php)自定义叠加层Google地图API还可让您通过实现GOverlay接口而创建自定义叠加层。通过实现GOverlay接口，Google地图API提供了若干服务，例如GTrafficOverlay、GGeoXml和GStreetviewPanorama对象。GOverlay接口需要您实现四种抽象方法：initialize()，用于响应GMap2.addOverlay()remove()，用于响应GMap2.removeOverlay()copy()，允许复制新建的叠加层redraw()，用于响应地图中的显示更改Google地图API接

22、口的实现方式是在JavaScript中将prototype属性赋值为继承对象的一个实例。例如，Rectangle对象可使用以下代码从GOverlay接口继承：viewplaincopytoclipboardprint?OverlayStotype=newGOverlay();通过为对象的prototype上的抽象方法赋值，可以轻松地实现GOverlay接口中的这些抽象方法：OverlayStotype.initialize=myInitializeMethod;OverlayStotype.remove=myRemoveMethod;OverlayStotype.copy=myCopyMeth

23、od;OverlayStotype.redraw=myRedrawMethod;在以下示例中，我们创建了一个Rectangle叠加层，在地图上勾勒出一个地理区域。Rectangle类定义GOverlay接口的四个必需方法。特别请记下initialize()方法(创建表示叠加层的DOM元素)和redraw()方法(基于当前投影和缩放级别在地图上定位叠加层并调整叠加层大小)。组成叠加层的每个DOM元素都位于一个“地图窗格”上，地图窗格定义绘制的Z轴次序。例如，折线对于地图来说是平面，所以在最低的G_MAP_MAP_PANE中绘制。标记将其阴影元素放置在G_MAP_MARKER_SHADOW_PAN

24、E中，将前景元素放置在G_MAP_MARKER_PANE中。将叠加层元素放置在正确的窗格中可以确保地图上的折线在标记阴影下方绘制，信息窗口在其他叠加层上方绘制。在此示例中，我们的叠加层相对于地图是平面，所以我们将其和GPolyline一样添加到最低绘制顺序窗格G_MAP_MAP_PANE。viewplaincopytoclipboardprint?/ARectangleisasimpleoverlaythatoutlinesalat/lngboundsonthe/map.Ithasaborderofthegivenweightandcolorandcanoptionally/haveasemi

25、-transparentbackgroundcolor.functionRectangle(bounds,opt_weight,opt_color)this.bounds_=bounds;this.weight_=opt_weight|2;this.color_=opt_color|#888888;Rtotype=newGOverlay();/CreatestheDIVrepresentingthisrectangle.Rtotype.initialize=function(map)/CreatetheDIVrepresentingourrectanglevardiv=document.cre

26、ateElement_x(div);div.style.border=this.weight_+pxsolid+this.color_;div.style.position=absolute;/Ourrectangleisflatagainstthemap,soweaddourselvestothe/MAP_PANEpane,whichisatthesamez-indexasthemapitself(i.e.,/belowthemarkershadows)map.getPane(G_MAP_MAP_PANE).appendChild(div);this.map_=map;this.div_=d

27、iv;/RemovethemainDIVfromthemappaneRtotype.remove=function()this.div_.parentNode.removeChild(this.div_);/CopyourdatatoanewRectangleRtotype.copy=function()returnnewRectangle(this.bounds_,this.weight_,this.color_,this.backgroundColor_,this.opacity_);/RedrawtherectanglebasedonthecurrentprojectionandzoomlevelRtotype.redraw=function(force)/Weonlyneedtoredrawifthecoordinatesystemhaschangedif(!force)return;/CalculatetheDIVcoordinatesoftwooppositecornersofourboundsto/getthesizeandpositionofourrectanglevarc1=this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest()varc2=this.map_.fromLa