基于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利用div背景,做一个竖线的效果。
Nov 22 Javascript
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
javascript闭包的理解
Apr 01 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
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面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python针对excel的操作技巧
2018/03/13 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
迟到检讨书500字
2014/02/05 职场文书
学校消防演习方案
2014/02/19 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
人事任命书怎么写
2014/06/05 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
调研报告的主要写法
2019/04/18 职场文书