基于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框架myJSFrame附API使用帮助
Jun 28 Javascript
Javascript中的var_dump函数实现代码
Sep 07 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 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如何编写易读的代码
2007/07/10 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
python函数局部变量用法实例分析
2015/08/04 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
材料专业毕业生求职信
2014/02/26 职场文书
个人整改方案范文
2014/10/25 职场文书
党员承诺书格式范文
2015/04/28 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
村官2015年度工作总结
2015/10/14 职场文书
初中英语教学反思范文
2016/02/15 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL