基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标

前言

近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为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显示和处理,下次会写一篇笔记.

(0)

相关推荐

  • 利用java、js或mysql计算高德地图中两坐标之间的距离

    前言 因为工作的原因,最近在做与地图相关的应用,使用了高德地图,研究了下高德地图计算两坐标距离的方法,官网上提供的开发包中有相关的方法,但是我的产品中比较特殊,无法直接使用提供的方法,所以就自己封装了相关计算方法,供大家参考,下面话不多说了,来一起看看详细的介绍吧. Java实现 首先定义一个用于存储经纬度的类,这里起个名字叫:LngLat package amap; import java.text.DecimalFormat; import java.text.DecimalFormatSy

  • vue调用高德地图实例代码

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是页面直接引入 复制代码 代码如下: <script type="text/javascript" src=&q

  • 关于Android高德地图的简单开发实例代码(DEMO)

    废话不多说了,直接给大家上干货了. 以下为初次接触时 ,练手的DEMO import android.app.Activity; import android.app.ProgressDialog; import android.content.ContentValues; import android.database.Cursor; import android.database.SQLException; import android.database.sqlite.SQLiteDatab

  • Android开发之高德地图实现定位

    在应用开发中,地图开发是经常需要使用的"组件",Google Map虽然有官方教程,无奈用不起来,原因你懂的~~那么国内比较出名的是就是百度地图和高德地图,由于个人喜好,所以选择了高德地图LBS,废话不说,上干货. 1.注册开发者,创建应用 这个几乎是所有开放平台都通用的做法,无外乎注册帐号,成为开发者,然后创建一个Android应用,会为你分配一个key绑定你的服务. 注册key.PNG 2.下载SDK,导入jar包,add to library jar包.PNG 第一个是2D地图的

  • Android中GPS坐标转换为高德地图坐标详解

    一.坐标分类 地图坐标大致分为几种: 1.GPS.WGS84,也就是原始坐标体系,这是国际公认的世界标准坐标体系: 2.GCJ-02,又称为"火星坐标",国家测绘局在02年发布的坐标体系,在国内,至少得使用此坐标体系,比如:google.高德.腾讯地图等: 3.其他特殊坐标体系,一般都是由火星坐标通过偏移算法计算得出的,比如百度使用的是BD-09坐标,搜狗使用的是自己的搜狗坐标. 二.坐标转换 1.使用高德地图sdk转换 public AMapLocation fromGpsToAma

  • 基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标

    前言 近来由于工作需要,需要提取某些城市的经纬度坐标,稍微搜索了一下,发现百度地图和高德地图都提供了相关的函数和例子.那么剩余的工作也就比较简单了,保存坐标,然后转换为WGS坐标,这样才能和现有的GPS数据以及地图匹配. 主要问题和解决方法 本地保存文件跨浏览器支持 由于安全的原因,JavaScript本地保存文件的方式通常都只有IE支持的ActiveXObject/Open方法,每次都要提示不安全和允许运行,非常麻烦.好在其他浏览器目前都支持<a>标签实现文件下载的方法.经测试最新的Goog

  • 百度地图API之百度地图退拽标记点获取经纬度的实现代码

    本文给大家分享百度地图api之百度地图退拽标记点获取经纬度的实现方法,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0

  • 详解Javascript百度地图接口开发文档中的类和方法

    JavaScript API v2.0介绍 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用,包含了构建地图基本功能的各种接口,提供了诸如本地搜索.路线规划等数据服务. 该套API免费对外开放.自v1.5版本起,您需先申请密钥(ak)才可使用,接口(除发送短信功能外)无使用次数限制. JavaScript API首家支持Https,如需要申请Https服务,请您认证企业信息,成为企业认证用户后,https

  • iOS实现设备判断是否安装相关地图(百度、高德等)

    前言 最近项目关于地图的,和朋友一起做的,他们用的高德地图,他做到半路有事,我来接手,结果我手机上没有安装高德地图,到我这边点击导航没啥反应,后来就查了一下,简单处理下,最终实现以下的需求: 点击导航,底部弹框,显示用户设备上所有的地图(一般就苹果自带的地图.百度地图.高德地图,当然了还有其他地图,个人感觉就这几个用的人比较多,其他的其实也类似),下面话不多说了,来一起看看详细的介绍吧. 具体做法如下: 1.plist文件进行相关的配置 LSApplicationQueriesSchemes (

  • 在网页中插入百度地图的步骤详解

    第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜索出自己要展示的位置,如下图所示. 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位.标记图标处可更换图标形状,名称和备注填入位置相关信息. 第四步:获取代码.将代码贴到你的网页里 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • Android百度地图应用之图层展示

    一.简介  1.地图类型  百度地图Android SDK 3.7.1提供了两种类型的地图资源(普通矢量地图和卫星图),开发者可以利用BaiduMap中的MapType属性(C#)来设置地图类型.C#核心代码如下: mMapView = FindViewById<TextureMapView>(Resource.Id.bmapView); mBaiduMap = mMapView.Map; //设置底图显示模式:普通地图 mBaiduMap.MapType = BaiduMap.MapType

  • Android百度地图应用之基本地图功能实现

    一.简介  1.地图  地图展示:普通地图(2D,3D).卫星图和实时交通图.  地图操作:可通过接口或手势控制来实现地图的点击.双击.长按.缩放.平移.旋转.改变视角等操作.  2.地图类型 百度地图Android SDK 3.6.1提供了两种类型的地图资源(普通矢量地图和卫星图,设置办法见demo04),如果不指定地图类型,默认为普通矢量地图.  此示例仅演示普通矢量图的基本用法.  3.本示例功能描述 该例子介绍如何构建一个基础的地图页面,并演示如何显示以自定义的经纬度坐标为中心点的百度地

  • 利用python和百度地图API实现数据地图标注的方法

    如题,先上效果图: 主要分为两大步骤 使用python语句,通过百度地图API,对已知的地名抓取经纬度 使用百度地图API官网的html例程,修改数据部分,实现呈现效果 一.使用python语句,通过百度地图API,获取经纬度读取文件信息 import pandas as pd data = pd.read_excel('test_baidu.xlsx') data 图中可以看出,原始数据并没有经纬度. 2. 构建抓取经纬度函数 import json from urllib.request i

  • 基于Arcgis for javascript实现百度地图ABCD marker的效果

    先给大家展示实现后效果: 为直观期间,先贴出来我做的效果 列表展示和地图展示以及联动 显示信息 实现思路: 1.列表与地图的互动 鼠标经过列表时,修改列表图标,并根据列表返回的值在地图上绘蓝色的marker:鼠标移出,修改列表图标为红色,清空地图marker图层. 关键代码: title.on("mouseover",function(){ var attr = $(this).data("attr"); $("#icon"+attr.id).c

  • 基于百度地图实现产品销售的单位位置查看功能设计与实现

    1.描述 本人最近参与基于MVC5+EF6+ Bootstrap3的食品安全监管系统设计.开发.先前感觉百度地图很神秘的样子.高大上的样子,设计.开发过程遇到些问题,经查看园子高手指点.示例摸索实践,终将百度地图嵌入系统.为感谢各位朋友的帮助,今有空,将基于百度地图实现产品销售的单位位置查看功能,分享给大家.不当之处,欢迎指正. 2.产品生产批次查询 查看单位产品生产批次信息,根据产品生产批次查看,产品销售单位情况. 效果图如下: 3.产品销售地图 根据选择的产品生产批次信息,查询统计产品销售到

随机推荐