本文主要介绍如何从baiduMap上将行政区域边界经纬度下载下来,制作成一个.geojson文件,以利用openlayer3加载在离线地图中。
最终目的的效果图(永州市下属11个县区行政区域划分,图片转自csdn的我的原博,已弃csdn,转博客园):
第一步:js实现文件写出(之前随笔中有源码),函数名为writeText(filename,content)。
第二步:加载百度地图在线api,实现百度地图界面显示。
function initialize() { var myLatLng = new google.maps.LatLng(37,104);//设置地图默认中心 var myOptions = { zoom : 4, //地图默认图层 center : myLatLng, mapTypeId : google.maps.MapTypeId.ROADMAP //地图类型,raodMap为街区图 }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);//地图加载在id为map_canvas的div中 }
第三步:获取行政区域经纬度。
var bdary = new BMap.Boundary(); var name = document.getElementById("districtName").value;//在id为districtName的input中输入想要获取的行政区域,例如:永州 //定义多边形作为边界 bdary.get(name, function(rs) { points = rs; //获取行政区域 var rslength = rs.boundaries.length; //获取有多少个同名的行政区域(通常为1) var content = '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[';//.geojson文件格式 for (i = 0; i < rslength; i++) { var triangleCoords = []; var temp = rs.boundaries[i]; //获取一个行政区 var latLngs = temp.split(";"); for (j = 1; j < latLngs.length - 1; j++) { var postion = latLngs[j].indexOf(","); var lat = parseFloat(latLngs[j].substr(0, postion));//经度 var lng = parseFloat(latLngs[j].substr(postion + 1));//纬度 //加入经纬度 triangleCoords.push(new google.maps.LatLng(lng, lat)); content = content + "["+lat+","+lng+"],"; } content = content.subtring(0,content.length-1);//去掉最后一个不需要的逗号 content = content + "]]}}]}";//形成一个完整的.geojson格式 writeText("d://"+document.getElementById("districtName2").value+".geojson",content);//将文件写出}