基于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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
javascript 学习之旅 (2)
Feb 05 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
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实现用户注册登录功能
2016/10/14 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
javascript parseInt 大改造
2009/09/27 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python的一些用法分享
2012/10/07 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
android面试问题与答案
2016/12/27 面试题
厂长助理岗位职责
2013/12/27 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
大学迎新生标语
2014/10/06 职场文书
学习十八大标语
2014/10/09 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
教师岗位职责
2015/02/03 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书