`
wang5598
  • 浏览: 112902 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

 五、查看效果如:

 

 

  • 大小: 174.8 KB
分享到:
评论
3 楼 du_kang 2014-12-16  
强哥 我现在在学习openlayers 加载百度地图 遇到些问题 你能把你写的源码发我一份吗 ?
谢谢强哥了 我的邮箱:1441215509@qq.com
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方法?

相关推荐

    使用openlayers加载离线地图实例

    在“使用openlayers加载离线地图实例”中,我们需要考虑以下关键步骤: 1. **设置HTML结构**:首先,创建一个HTML文件作为应用的基础,引入OpenLayers库和其他必要的CSS和JavaScript资源。确保OpenLayers库的路径...

    openlayers加载瓦片地图并手动标记坐标点

    本教程将详细介绍如何使用OpenLayers加载瓦片地图以及手动在地图上标记坐标点。 一、OpenLayers 瓦片地图 瓦片地图是一种常见的地图展示方式,它将大尺寸的地图分割成多个小块(即“瓦片”),每个瓦片都是一个较...

    openlayers5加载百度地图.zip

    这个压缩包“openlayers5加载百度地图.zip”显然包含了使用OpenLayers 5版本与百度地图API集成的示例代码。OpenLayers 5是这个库的一个重要升级,提供了更多的功能、性能优化以及对现代Web标准的支持。 首先,让...

    openlayers 调用百度地图

    在OpenLayers中调用百度地图是一项常见的需求,特别是在构建Web GIS应用时,用户可能希望结合OpenLayers的强大功能和百度地图的丰富数据。OpenLayers是一个开源JavaScript库,用于创建交互式的地图应用,而百度地图...

    解决openlayers加载百度地图,坐标偏移,热力图渲染闪烁问题

    项目需求是想在百度地图上面用openlayers渲染热力图,然后就去看了相关openlayers的文档,选择了6.15.1版本,然后仿照地震热力图例子写了代码,但是由于自带是OSM地图,不符合项目要求,所以研究了如何加载百度地图...

    openlayers 4.2 加载百度 高德

    本文将深入探讨如何使用OpenLayers 4.2加载百度地图和高德地图。 首先,让我们了解一下百度地图API。百度地图是中国领先的在线地图服务提供商,提供了一系列API供开发者使用。在OpenLayers 4.2中集成百度地图,你...

    openlayers 加载天地图示例

    OpenLayers 是一个强大的开源JavaScript库,用于在网页上创建...通过这个示例,你可以了解到如何使用OpenLayers与天地图结合,构建一个基本的在线地图应用。学习和理解这段代码将有助于你进一步开发更复杂的GIS项目。

    openlayers加载静态图片地图

    本教程将详细介绍如何使用OpenLayers加载静态图片地图,并探讨其流畅操作、可控显示范围和等级设置。 首先,为了加载静态图片,我们需要准备好图片资源。这些图片通常是一系列按照特定比例尺分块的图像,每一块对应...

    OpenLayers3加载谷歌地图

    OpenLayers3加载谷歌地图,加载谷歌地图显示,实现效果很好,放大比例尺也能看得清楚。文章链接:https://blog.csdn.net/Gary_888/article/details/89914290

    openlayers加载本地离线地图瓦片(重新发2018-10-23)

    在GIS(地理信息系统)领域,...通过以上步骤,我们可以使用OpenLayers成功地在本地加载离线地图瓦片。请注意,为了确保程序正常运行,所有依赖的文件(JavaScript、CSS以及地图瓦片数据)都需要正确配置和定位。

    openlayers加载在线天地图.zip

    本教程将详细介绍如何使用OpenLayers加载在线天地图。 一、OpenLayers基础知识 OpenLayers 提供了一套完整的API,用于构建动态地图应用程序。它支持多种地图操作,如缩放、平移、图层控制等。同时,OpenLayers 支持...

    openlayers5加载天地图影像.zip

    本文将深入探讨如何使用OpenLayers 5加载天地图影像,这是一个中国本土的、提供丰富地理信息的在线地图服务。 首先,了解基本概念。天地图是中国测绘科学研究院开发的地理信息系统,它提供了多种地图服务,包括影像...

    openlayers5加载天地图.zip

    总之,"openlayers5加载天地图.zip"是一个帮助开发者学习和实践如何使用OpenLayers 5与天地图服务集成的资源。通过这个例子,你可以深入理解OpenLayers的图层管理和地图交互机制,为创建自己的GIS应用打下坚实的基础...

    openlayers加载WMS服务

    本文将详细探讨如何使用OpenLayers加载WMS服务,以及这一过程中的关键概念和技术。 ### OpenLayers简介 OpenLayers 提供了一个丰富的API,用于处理各种地图操作,如图层管理、标记添加、图层叠加、地理坐标转换等。...

    openlayers加载本地离线底图瓦片google数据直接运行即可(亲测)

    总的来说,这个案例展示了如何使用OpenLayers和本地离线瓦片数据创建一个地图应用,这对于户外活动、野外考察或在无法访问互联网的环境中尤其有用。同时,这也涉及到Web开发的基础知识,如JavaScript、地理信息系统...

    openlayers加载arcgis发布的OGC WMS服务

    在这个主题中,我们将深入探讨如何使用OpenLayers来加载由ArcGIS发布的WMS服务。 **OGC WMS服务** OGC Web Map Service(WMS)是一种标准协议,允许客户端(如OpenLayers)请求服务器(如ArcGIS Server)生成地理...

    baiduMap_openlayer(openlayer加载百度地图例子)

    通过学习这个示例,开发者可以掌握如何将OpenLayers与百度地图结合,从而在自己的Web应用中灵活地使用百度地图的服务,实现各种定制化的地图功能。这不仅有助于提升用户体验,也为开发者提供了更广阔的应用场景。

    openlayers5加载谷歌地图.zip

    在本案例中,我们讨论的是如何利用OpenLayers 5来加载谷歌地图。对于初学者来说,这是一个很好的起点,因为OpenLayers提供了丰富的API和强大的功能。 首先,我们要了解OpenLayers 5的基本概念。OpenLayers 5的核心...

    openlayers加载本地切片、高亮显示

    以上就是使用OpenLayers加载本地切片并实现高亮显示的基本流程。在实际应用中,你可能还需要处理各种边界情况,比如切片加载错误、地图缩放时的切片预加载策略等。此外,为了更好地管理切片,你可以考虑使用一个...

    openlayers3添加各种地图资源

    加载百度地图需要使用Baidu Maps API的坐标转换和图层配置。首先,确保在HTML文件中引入百度地图API,然后在OpenLayers 3 的配置中设置投影和图层URL。例如: ```javascript var baiduLayer = new ol.layer.Tile({ ...

Global site tag (gtag.js) - Google Analytics