基于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加ASP二级域名转向的代码
May 17 Javascript
List the UTC Time on a Computer
Jun 11 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
python生成带有表格的图片实例
2019/02/03 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
管理提升方案
2014/06/04 职场文书
学校四风对照检查材料
2014/08/28 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
离婚纠纷代理词
2015/05/23 职场文书
python运行脚本文件的三种方法实例
2022/06/25 Python