在某一个项目中，需要在一张地图上叠加中国行政区域，提供省、市两级行政区域的范围，由于自己的数据源不全，不能保证数据的完整性，所以采用调用百度云地图的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);
});
}
五、查看效果如：
