基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标


Posted in Javascript onJanuary 22, 2016

前言

近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GPS数据以及地图匹配.

主要问题和解决方法

本地保存文件跨浏览器支持

由于安全的原因,JavaScript本地保存文件的方式通常都只有IE支持的ActiveXObject/Open方法,每次都要提示不安全和允许运行,非常麻烦.好在其他浏览器目前都支持<a>标签实现文件下载的方法.经测试最新的Google Chrome, Mozilla Firefox,百度浏览器,360浏览器下都可以运行.不说废话,直接上代码:

function Download() {
// IE
if(/msie/i.test(navigator.userAgent)) {
var w = window.open("", "导出", "height=0,width=0,toolbar=no,menubar=no,scrollbars=no,resizable=on,location=no,status=no");
var filename = document.getElementById("filename").value ;
var content = document.getElementById("content").value;
w.document.charset = "UTF-8";
w.document.write(content);
w.document.execCommand("SaveAs", false, filename+'.txt');
w.close();
}
// Firefox/Chrome/Safari/Opera
else {
var filename = document.getElementById("filename").value ;
var content = document.getElementById("content").value;
str = encodeURIComponent(content); 
document.getElementById("SaveChrome").download = filename+'.txt'; 
var aLink = document.getElementById("SaveChrome") ; 
aLink.href = "data:text/csv;charset=utf-8,"+str; 
aLink.click(); 
}
}

经纬度转换

这个话题感兴趣的朋友可以自己搜索火星坐标相关转换,精度在1m范围的网上提供有服务可以免费使用.自写程序经验证精度在6m 以内.

百度地图方法

关键函数是 BMap.Boundary() 生成的类,调用它的方法get就可以通过名称获得县或市级以上的行政区域.

function getBoundary() {
var bdary = new BMap.Boundary();
var name = document.getElementById("districtName").value;
bdary.get(name, function (rs) { //获取行政区域
var fileName = "";
var newFileObject = fso.CreateTextFile(folderName + "\\" + name + ".txt", true);
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
map.setViewport(ply.getPath()); //调整视野
}
newFileObject.write(rs.boundaries[0]);
newFileObject.Close();
});
}

高德地图

关键代码通过阅读示例文件可以发现在下拉列表返回里面有边界值的出现.

amapAdcode.search = function(adcodeLevel, keyword, selectId) {//查询行政区划列表并生成相应的下拉列表
var me = this;
if (adcodeLevel == 'district'||adcodeLevel == 'city') {//第三级时查询边界点
this._district.setExtensions('all');
} else {
this._district.setExtensions('base');
}
this._district.setLevel(adcodeLevel); //行政区级别
this._district.search(keyword, function(status, result) {//注意,api返回的格式不统一,在下面用三个条件分别处理
var districtData = result.districtList[0];
if (districtData.districtList) {
me.createSelectList(selectId, districtData.districtList);
} else if (districtData.districts) {
me.createSelectList(selectId, districtData.districts);
} else {
document.getElementById(selectId).innerHTML = '';
}
map.setCenter(districtData.center);
me.clearMap();
me.addPolygon(districtData.boundaries);

其中的districtData.boundaries 就是我们需要的.调试了一下,大胆猜测果然是实现了Tostring() 方法的一个对象.
"104.639106,26.863388,104.644771,26.861842,104.64767,26.854997,104.647748..." 很明显的就是我们需要的gcj坐标.

总结

至此,基本也就没有什么问题了,剩余的工作就是解析得到的文件.需要提取全国的数据也就是循环读取全国城市列表文件了.(通常搜索cityname,电脑里面都会找到的,原因,呵呵,猜测是迅雷,QQ之类的IP定位需要吧.)

重要的一点,推荐使用高德地图,原因就是百度地图得到的行政规划有问题,不包含县级市.最典型的就是贵州省,很多地市都是分离的,是带岛或洞的复杂多边形.百度在这里完败.关于怎么处理这里复杂的多边形以支持在MapWinGIS显示和处理,下次会写一篇笔记.

Javascript 相关文章推荐
提交表单时执行func方法实现代码
Mar 17 Javascript
jQuery中extend函数详解
Feb 13 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 #Javascript
鼠标悬停小图标显示大图标
Jan 22 #Javascript
在JavaScript中call()与apply()区别
Jan 22 #Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 #Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 #Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 #Javascript
JavaScript学习笔记整理之引用类型
Jan 22 #Javascript
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
简单的php文件上传(实例)
2013/10/27 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
原生JavaScript实现轮播图
2021/01/10 Javascript
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
django中使用POST方法获取POST数据
2019/08/20 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
大四学年自我鉴定
2013/11/13 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
超市员工辞职信范文
2015/05/12 职场文书
调解书格式范本
2015/05/20 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
高中生军训感言
2015/08/01 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书