基于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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
JS实现的自定义map方法示例
May 17 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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中显示格式化的用户输入
2006/10/09 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
js实现文字截断功能
2016/09/14 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
python利用不到一百行代码实现一个小siri
2017/03/02 Python
python2.7到3.x迁移指南
2018/02/01 Python
关于Python的一些学习总结
2018/05/25 Python
python实现ip代理池功能示例
2019/07/05 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python颜色随机生成器的实例代码
2020/01/10 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
python实现猜拳游戏项目
2020/11/30 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
javascript canvas实现雨滴效果
2021/06/09 Javascript