在某一个项目中,需要在一张地图上叠加中国行政区域,提供省、市两级行政区域的范围,由于自己的数据源不全,不能保证数据的完整性,所以采用调用百度云地图的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); }); }
五、查看效果如:
相关推荐
使用openlayers加载离线地图实例,可通过mui打包成app。简单,易上手
openlayers 加载天地图示例
openlayers 调用百度地图
openlayers 4.2 加载百度地图(在线 离线) 高德地图(在线 离线)
OpenLayers3加载谷歌地图,加载谷歌地图显示,实现效果很好,放大比例尺也能看得清楚。文章链接:https://blog.csdn.net/Gary_888/article/details/89914290
openlayers加载静态图片作为底图,操作图片流畅,可控显示范围和等级
此代码采用了最新的openlayers5,引用了在线的百度地图,可供学习者使用参考,欢迎改进开发。
提供openlayers加载WMS服务的完整示例
使用openlayers5加载天地图影像,可以供参考使用,希望可以改进代码,重新使用。
webgis开发,文件里包含用openlayers3加载百度地图、天地图、高德地图、google地图等源代码,很全很实用。
此代码采用开源的openlayers5,显示天地图的注记图层,天地图路网图层,欢迎下载使用。
利用openlayers加载geoserver wfs服务发布的矢量图层。
有朋友反应上一次代码无法运行,我看了一下 是html里的路径写死了 然后把ol.js 与 ol.css也放上来了。。。保证能运行!!!
利用下载好得离线google地图瓦片数据 结合openlayers接口进行加载显示 纯本地离线好得瓦片数据 运行没问题 当然把瓦片放在服务器上发布出来也是可以的 代码中修改url即可
此代码为结合openlayers5和谷歌在线地图,可供初学者参考。谷歌影像图需要更改url即可。
openlayers加载arcgis发布的OGC WMS服务。。。。。。。。。
openlayers使用imageCanvas加载矢量元素
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并...
花费了很久整理的ol2的代码直接可用附带3级切片
openlayers加载瓦片地图并手动标记坐标点