基于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节点知识
Jan 31 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
JQuery触发事件例如click
Sep 11 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
vue时间格式化实例代码
Jun 13 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
详解Node.JS模块 process
Aug 31 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和XSS跨站攻击的防范
2007/04/17 PHP
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
python 控制语句
2011/11/03 Python
python快速排序代码实例
2013/11/21 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python简明入门教程
2015/08/04 Python
Python常用知识点汇总
2016/05/08 Python
python动态进度条的实现代码
2019/07/03 Python
如何写python的配置文件
2020/06/07 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
顶岗实习接收函
2014/01/09 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
工作调动申请报告
2015/05/18 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技