基于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 相关文章推荐
JavaScript URL参数读取改进版
Jan 16 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
JavaScript中window和document用法详解
Jul 28 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面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
input框中的name和id的区别
2016/11/16 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python程序暂停的正常处理方法
2019/11/07 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
allbeauty美国:英国在线美容店
2019/03/11 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
家长给小学生的评语
2014/01/30 职场文书
烹饪自我鉴定
2014/03/01 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
库房管理员岗位职责
2015/02/12 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技