基于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 相关文章推荐
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
js分页工具实例
Jan 28 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
老生常谈ES6中的类
Jul 31 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
php5中类的学习
2008/03/28 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
Javascript this指针
2009/07/30 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
python中的json总结
2018/10/11 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
解析Python的缩进规则的使用
2019/01/16 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
酒店管理自荐信
2013/10/23 职场文书
大学班级文化建设方案
2014/05/06 职场文书
煤矿安全生产标语
2014/06/06 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫