为Google Maps添加其他的地图

        本来这几天我也在研究这个问题，可是最后我发现，Google使用了一个自己定义的地理坐标模式，具体参考getBitmapCoordinate函数就能看出来，而这种坐标模式和其他的地图提供者的一些模式区别很大，转化起来非常复杂（而且我的能力不够），因此我至今没有成功。

       可是我在网上找到了一个JS文件成功地实现了该功能，不过我看过这个例子之后才知道，这个例子使用的是一种比较自由的动态图片文件的方法来提供地图的，因此能够比较容易的与Google兼容，不管怎么说，我就先用上了。

只需要在页面中引用这个JS文件GMapCrossControl.js（点击下载该文件），并引入到页面：

1    <script src="GMapCrossControl.js" type="text/javascript"></script>

然后就可以通过如下方法加入新的通过WMS服务提供的地图：

1        map = new GMap(document.getElementById("map"));
2//上面是创建的地图对象，下面添加两个地图类型
3        map.mapTypes.push(new WMSSpec(map.mapTypes[0], "http://wms.jpl.nasa.gov/wms.cgi?", "JPL-mod", "modis", "", "image/jpeg" ));    
4        map.mapTypes.push(new WMSSpec(map.mapTypes[0], "http://wms.jpl.nasa.gov/wms.cgi?", "JPL-gm", "global_mosaic", "", "image/jpeg" ));    
5

其中的参数可以参考以下JS文件源码中的说明：

  1//==============================================================
  2//Spatial Data Logic - 2005
  3//WMS Map Spec
  4/**//*
  5James Fee and others have pointed out that Cubewerks is offering an add-on to their server product that offers Google Maps data as a WMS service. This is pretty cool but what I’d expect most developers want is the ability to display WMS layers directly in a GMap instance in the browser. Fortunately, this is not too difficult if we base a WMS map spec on the existing Street Map spec and then manipulate the URL returned for each map tile. IMO, this opens up a lot more data for use in simple GMaps applications.
  6
  7Download the WMSSpec code
  8Example:
  9var wms = new WMSSpec(mapTypes[0], "http://wms.jpl.nasa.gov/wms.cgi?", "WMS Test", "modis", "default", "image/jpeg" );
 10Either add this to your array of specs passed to the GMap constructor or use the undocumented access to the array itself. (MyGMap.mapTypes[MyGMap.mapTypes.length] = wms;)
 11
 12WMSSpec(baseSpec, baseURLtoWMSServer, name, layer, style, format);
 131) the Google Maps Streets spec, usually the first spec in the array but it is also pointed to by the G_MAP_TYPE and _GOOGLE_MAP_TYPE variables
 142) The URL to the WMS Server, don’t forget the “?” at the end
 153) Name of service, used for labeling
 164) Layer – the WMS layer name to use. This parameter is passed in whole to the server so it will accept whatever the WMS server is expecting
 175) Style – the WMS style to use. See 4.
 186) Format – the image format to return. (e.g. image/png, image/jpeg etc.)
 19*/
 20function WMSSpec (spec, baseUrl, name, layers, styles, format, overlay, copywrite)
 21{
 22    this.BaseSpec = spec;
 23    this.baseUrl = baseUrl;
 24    this.Map = map;
 25    this.tileSize=spec.tileSize;
 26    //this.tileSize=1024;
 27    this.backgroundColor=spec.backgroundColor;
 28    this.emptyTileURL=spec.emptyTileURL;
 29    this.waterTileUrl=spec.waterTileUrl;
 30    this.numZoomLevels=spec.numZoomLevels;
 31    this.pixelsPerDegree=spec.pixelsPerDegree;
 32    this.mapBounds=spec.mapBounds;
 33    this.ukBounds=spec.ukBounds;
 34    this.earthBounds=spec.earthBounds;
 35    this.Name = name;
 36    this.Layers = layers;
 37    this.Styles = styles;
 38    this.Format = format;
 39    this.copywrite = copywrite;
 40    this.overlay = overlay;
 41    
 42}
 43
 44WMSSpec.prototype.adjustBitmapX=function(a,b)
 45{
 46    return this.BaseSpec.adjustBitmapX(a,b);
 47}
 48
 49WMSSpec.prototype.getBitmapCoordinate=function(a,b,c,d)
 50{
 51    return this.BaseSpec.getBitmapCoordinate(a,b,c,d);
 52}
 53
 54WMSSpec.prototype.getLatLng=function(a,b,c,d)
 55{
 56    return this.BaseSpec.getLatLng(a,b,c,d);
 57}
 58
 59WMSSpec.prototype.getTileCoordinate=function(a,b,c,d)
 60{
 61    return this.BaseSpec.getTileCoordinate(a,b,c,d);
 62}
 63
 64
 65WMSSpec.prototype.getOverlayURL=function(a,b,c)
 66{
 67    return this.BaseSpec.getOverlayURL(a,b,c);
 68}
 69
 70WMSSpec.prototype.getTileURL=function(a,b,c)
 71{
 72    var ts = this.tileSize;
 73    var ul = this.getLatLng(a*ts,(b+1)*ts, c);
 74    var lr = this.getLatLng((a+1)*ts, b*ts, c);
 75    var bbox = ul.x + "," + ul.y + "," + lr.x + "," + lr.y;
 76    var url = this.baseUrl + "version=1.1.1&request=GetMap&Layers=" + this.Layers + "&Styles=" + this.Styles + "&SRS=EPSG:4326&BBOX=" + bbox + "&width=" + ts +"&height=" + ts + "&format=" + this.Format;
 77    //var url = this.baseUrl + "REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1&LAYERS=" + this.Layers + "&STYLES=" + this.Styles + "&FORMAT=" + this.Format + "&BGCOLOR=0xFFFFFF&TRANSPARENT=TRUE&SRS=EPSG:4326&BBOX=" + bbox + "&WIDTH=" + ts + "&HEIGHT=" + ts;
 78    return url;
 79}
 80
 81
 82WMSSpec.prototype.getLowestZoomLevel=function(a,b,c)
 83{
 84    return this.BaseSpec.getLowestZoomLevel(a,b,c);
 85}
 86
 87WMSSpec.prototype.getPixelsPerDegree=function(a)
 88{
 89   return this.BaseSpec.getPixelsPerDegree(a);
 90}
 91
 92WMSSpec.prototype.getLinkText=function()
 93{
 94    return this.Name;
 95}
 96WMSSpec.prototype.getShortLinkText=function()
 97{
 98    return this.Name;
 99}
100WMSSpec.prototype.hasOverlay=function()
101{
102    return this.BaseSpec.hasOverlay();
103}
104WMSSpec.prototype.getURLArg=function()
105{
106    return this.BaseSpec.getURLArg();
107}
108
109WMSSpec.prototype.getCopyright=function()
110{
111    return this.copywrite;
112    //return this.BaseSpec.getCopyright();
113}
114
115WMSSpec.prototype.zoomBitmapCoord=function(a,b,c)
116{
117    return this.BaseSpec.zoomBitmapCoord(a,b,c);
118}
119

        最可惜的是，提供WMS服务的网站基本上都不提供详细的中国的地图服务，像上面的两个能够把中国显示出来已经是不错的了，国内的地图提供网站比如http://www.mapbar.com、http://www.51ditu.com  又不提供和Google兼容的服务……