使用openlayers加载地图行政区域（结合百度云地图）

在某一个项目中，需要在一张地图上叠加中国行政区域，提供省、市两级行政区域的范围，由于自己的数据源不全，不能保证数据的完整性，所以采用调用百度云地图的API来实现在地图上显示行政区划范围；项目中使用的技术框架为：以Openlayers来地图控制类，以Jquery做为基本的DOM操控工具，整个处理过程如下：

一、工具准备：

       首先在页面上引入jquery、OpenLayers和百度云地图Js库；

        <script type="text/javascript" src="./js/base/jQuery.js"></script>

        <script type="text/javascript" src="./js/openlayer/OpenLayers.js"></script>

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> 

二、页面准备：

        一张Html页面准备好map容器、准备好省、市两级下拉联动条；

       <div id="map" class="center_up" style="overflow:hidden; "></div>    

       联动滚动条，我是用的div+css+Ajax来模拟的外形，代码比较多，就不贴了，只要能实现获取用户选定的省、市的字符串内容就行了；

三、创建地图：

var mapOptions = { 
   		 displayProjection : WGS84,
   		 units: "degrees",
   		 numZoomLevels:15,
   		 allOverlays: true,
   		 controls: [],
   		 projection: WGS84,
	     maxExtent: new OpenLayers.Bounds(-180.0,-90.20209041233414,180.4041808246683,90.0),
   		 };
    
    map = new OpenLayers.Map('map', mapOptions);

 说明下，这里采用国内用的较多的WGS84的坐标系（EPSG:4326），如果你自己你是球面墨卡托投影的话，需要使用pro4j来做额外的投影转换，百度也是采用的WGS84坐标，所以我们这里不用做额外的转换，map设置完成之后，传入一张矢量电子地图做baselaye即可，这个自己操作即可；

四、叠加行政区划：

     这个时候，百度地图的API就可以派上用场了:

var triangleCoords = [];  
/**
 * 根据城市名描画边界范围
 * @author:wangyq
 * @parameters:name，区划名，比如广东省或者东莞市
 */
function makeBoundsByRegion(name){
	//下面这句是调用百度API
	var bdary = new BMap.Boundary(); 
	var polygonArray = [];
	triangleCoords.length=0;
	bdary.get(name, function(rs) {
		 points = rs; //获取行政区域  
		 var rslength = rs.boundaries.length;   
		 var components = new Array();
		 var polygon = null;
		 for (i = 0; i < rslength; i++) {  
			 var temp = rs.boundaries[i];  
			 //一个temp代表一个polygon，部分区域譬如广东省边界范围中包含多个polygon，需要递归画出来
			 var latLngs = temp.split(";");  
			 triangleCoords.length = 0;
			 for (j = 1; j < latLngs.length - 1; j++) { 
				 var postion = latLngs[j].indexOf(",");  
				 var lng = parseFloat(latLngs[j].substr(0, postion));//经度  
				 var lat = parseFloat(latLngs[j].substr(postion + 1));//纬度  
				 triangleCoords.push(new OpenLayers.Geometry.Point(lng,lat));  
			 }
			 var k = triangleCoords.length;
			 var line = new OpenLayers.Geometry.LinearRing(triangleCoords);
			 polygon = new OpenLayers.Geometry.Polygon([line]);
			 polygonArray.push(polygon);
		 }
		 var MultiPolygon = new OpenLayers.Geometry.MultiPolygon(polygonArray);
		 var polygonBounds = new OpenLayers.Feature.Vector(MultiPolygon);
		 //设置layersname为行政边界的图层的样式
		 if(map.getLayersByName("行政边界").length==0){
			 var sketchStyle = new OpenLayers.Style(null, {
				 rules: [
				         new OpenLayers.Rule({
				        	 symbolizer: {
				        		 "Polygon": {
				        			 strokeWidth: 3.5,
				        			 strokeOpacity: 1,
				        			 strokeColor: "#FF3366",
				        			 fillColor: "#ff0000",
				        			 fillOpacity: 0
				        		 }
				        	 }
				         })
				         ]
			 });
			 var myStyle = new OpenLayers.StyleMap({ 
				 "default":sketchStyle
			 });
			 var bouderLayer = new OpenLayers.Layer.Vector("行政边界",{
				 styleMap: myStyle,
				 projection:WGS84
			 });
			 bouderLayer.addFeatures(polygonBounds);
			 map.addLayer(bouderLayer);
			 
		 }else{
			 map.getLayersByName("行政边界")[0].removeAllFeatures();
			 map.getLayersByName("行政边界")[0].addFeatures(polygonBounds);
		 }
		 var centroid = new OpenLayers.LonLat.fromString(MultiPolygon.getCentroid().x+","+MultiPolygon.getCentroid().y);
		 map.moveTo(centroid);
	});
}

 五、查看效果如：