OpenLayers系列(3)——使用第三方地图API(GoogleMap)，聚合多个地图数据

使用第三方API及地图数据

首先是一个调用GoogleMap的例子

<!DOCTYPE html>
<html lang='en'>
<head>
    <Meta charset='utf-8' />
   <title>My OpenLayers Map</title>   
    <script type='text/javascript' src='OpenLayers.js'></script>
	<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>//引用Google地图在线脚本
    <script type='text/javascript'>

        var map;

       function init() {
           map = new OpenLayers.Map('map_element',{});

           var google_hybrid = new OpenLayers.Layer.Google(//创建Google图层子类
					"Google Hybrid",{type: google.maps.MapTypeId.HYBRID}//当前google支持的map type之一
				);

		   var google_physical = new OpenLayers.Layer.Google(
					"Google Physical",{type: google.maps.MapTypeId.TERRAIN}
				);

		   var google_satellite = new OpenLayers.Layer.Google(
					"Google Satellite",{type: google.maps.MapTypeId.SATELLITE}
				);

		   var google_streets = new OpenLayers.Layer.Google(
					"Google Streets",{}
				);

           map.addLayers([google_hybrid,google_physical,google_satellite,google_streets]);
		
		   map.addControl(new OpenLayers.Control.LayerSwitcher());

           if(!map.getCenter()){
               map.zoomToMaxExtent();
           }
       }

    </script>
</head>

<body onload='init();'>
    <div id='map_element' style='width: 500px; height: 500px;'>
    </div>
</body>
</html>

于之前的例子一样，运行后效果图如下：

代码分析

首先，引用第三方脚本，这里是google map js；

其次，使用OpenLayers支持的Layer子类创建相应的图层对象。这里的第三方库必须是OpenLayers自己已经支持的，幸运的是它已经支持几乎所有流行的第三方map server，如：Google map,Yahoo! map,Bing map,OpenStreetMaps等。在创建相应地图的图层时，必须查看对应的文档以确定它所支持的layer以及这些layer是base layer还是overlay layer。上例中所使用的几个图层均是base layer，可以google map官方网站（https://developers.google.com/maps/documentation/javascript/maptypes）找到相应文档。

调用第三方API到这里就完成了，不需要太多的工作。但这也只是为接下来的内容做准备。

聚合多个地图数据

就是说要在同一张地图上使用来自不同map server的数据，根据业务需要来调整图层。

要完成这一工作，首先必须清楚一个概念：投影(Projection)。

任何一个map server都有自己的投影规则，相应的会有不同的坐标系统。要想在同一地图上显示来自不同地图服务器的数据，必须要确保让不同的map server使用同一投影规则并投影到同一种坐标系中。这就要看map server本身是否支持多种投影规则了，如果两个服务器本身就不支持统一的投影，那根本不可能在同一地图上显示其数据。

Google map支持的投影规则是流行的球形墨卡托投影法，其使用的坐标系与之前例子中的WMS不同，google map使用x y 坐标系而WMS使用经纬度坐标系。为了统一，必须一开始设定一种两个服务器同时支持的投影规则。

要把Google map和其他图层聚合在一起需要三步：

1.设置合适的地图投影属性

2.确保其他图层的sphericalMercator属性被设置为true（该投影规则是google目前所用的）

3.使其他光栅图层（即非矢量和图片类型的图层）如WMS映射到地图投影中。

示例(Google map & WMS & Vector layer)

代码:

<!DOCTYPE html>
<html lang='en'>
<head>
    <Meta charset='utf-8' />
   <title>My OpenLayers Map</title>   
    <script type='text/javascript' src='OpenLayers.js'></script>
	<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
    <script type='text/javascript'>

        var map;

       function init() {
           map = new OpenLayers.Map('map_element',{
				  maxExtent: new OpenLayers.Bounds(//设置地图域
				  -128 * 156543.0339,-128 * 156543.0339,128 * 156543.0339,128 * 156543.0339),maxResolution: 156543.0339,//最大分辨率
				  units: 'm',//度量单位
				  projection: new OpenLayers.Projection('EPSG:900913'),//投影规则
				  displayProjection: new OpenLayers.Projection("EPSG:4326"),//显示的投影规则
				});

           var google_streets = new OpenLayers.Layer.Google(
				  "Google Streets",{numZoomLevels: 20}
				);//google map默认sphericalMercator=true

		   var wms_layer = new OpenLayers.Layer.WMS(
				  'OpenLayers WMS','http://vmap0.tiles.osgeo.org/wms/vmap0',{layers: 'basic,clabel,ctylabel,statelabel',transparent: true},{isBaseLayer: false,//确保用WMS做overlay layer
				  opacity: .7}
				);
			var vector_layer = new OpenLayers.Layer.Vector(
				 'Editable Vectors');//创建一个矢量图层

            //添加一个矢量编辑工具条，该工具条可以在矢量图层上添加点或多边形
			map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));

           map.addLayers([google_streets,wms_layer,vector_layer]);
		
		   map.addControl(new OpenLayers.Control.LayerSwitcher());

           if(!map.getCenter()){
               map.zoomToMaxExtent();
           }
       }

    </script>
</head>

<body onload='init();'>
    <div id='map_element' style='width: 500px; height: 500px;'>
    </div>
</body>
</html>

OpenLayers系列(3)——使用第三方地图API(GoogleMap)，聚合多个地图数据

猜你在找的设计模式相关文章