基于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 相关文章推荐
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
iframe实用操作锦集
Apr 22 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
javascript实现获取字符串hash值
May 10 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 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编码规范-php coding standard
2007/03/16 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
javascript包装对象实例分析
2015/03/27 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Python Flask基础教程示例代码
2018/02/07 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
python开发入门——列表生成式
2020/09/03 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
简历里的自我评价
2014/01/31 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
数学系毕业生求职信
2014/05/29 职场文书
售后服务承诺函格式
2015/01/21 职场文书
会计工作检讨书
2015/02/19 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP