使用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);
	});
}

 五、查看效果如：

 

 

评论

3 楼 du_kang 2014-12-16  

强哥 我现在在学习openlayers 加载百度地图 遇到些问题 你能把你写的源码发我一份吗 ?
谢谢强哥了 我的邮箱：[e-mail]

2 楼 wang5598 2014-03-05  

ArthurYMN 写道

强哥好，你将百度api和openlayers包结合使用的思路让我很受启发，我刚接触GIS开发，想问一下，百度地图能加载到openlayers里，如何编写他的getUrl方法？

呵呵，我看了下百度JS版本的API的调用过程：它的调用函数为：

    var bs = new p();
    bs.tileUrls = ["http://d0.map.baidu.com/resource/mappic/", "http://d1.map.baidu.com/resource/mappic/", "http://d2.map.baidu.com/resource/mappic/", "http://d3.map.baidu.com/resource/mappic/"];
    bs.getTilesUrl = function (T, cM) {
        var cO = T.x;
        var cL = T.y;
        var cN = Math.pow(2, (20 - cM)) * 256;
        cL = Math.round((9998336 - cN * (cL)) / cN) - 1;
        url = this.tileUrls[Math.abs(cO + cL) % this.tileUrls.length] + this.map.currentCity + "/" + this.map.cityCode + "/3/lv" + (21 - cM) + "/" + cO + "," + cL + ".jpg";
        return url
    };

如果你不是为了去获得百度底层的构造方法的话，你可以直接用它的API去获取瓦片而不用关心细节；关注细节的话，你要分析它整个JS的内容了，这个得要靠你自己啦。

1 楼 ArthurYMN 2014-02-23  

强哥好，你将百度api和openlayers包结合使用的思路让我很受启发，我刚接触GIS开发，想问一下，百度地图能加载到openlayers里，如何编写他的getUrl方法？