锐客网

  1. 首页 > it技术 > >

在谷歌地图上绘制行政区域轮廓【结合高德地图的API】

这篇文章是之前我在博客园发表的一篇文章(在谷歌地图上绘制行政区域轮廓
)，刚好最近有朋友问到类似的问题，加上博客园已经不写博客，所以打算迁移到。
需求 希望在谷歌地图上绘制一个城市的县区级行政区轮廓。
困难点 谷歌地图未提供【行政区查询的API】，所以只能借助其他地图的API
实现思路 1.先用其他地图接口【行政区查询的API】获取一个城市所有的行政区
2.利用其他地图的【行政区划分查询】api获取每个区的行政区边界坐标点(百度地图需要转坐标，高德地图误差小，可以不需要转换)
3.根据边界坐标点在谷歌地图上绘制区域轮廓线
可以尝试两种地图方案：
方式一：
用百度地图的api进行绘制，结果发现因为行政区轮廓的坐标点数据不够多，绘制出来的行政区轮廓很粗糙，精度不够，导致有些交界地区错误的划分到其他行政区。
方式二(推荐)：
1.利用高德地图行政区域API获得坐标列表
2.将坐标列表绘制在谷歌地图上【因为高德地图和国内的谷歌地图都是采用GCJ02坐标系，所有误差很小，可以不进行坐标误差转换】
注意点
1.用百度地图的API来绘制行政区域，不太准确，很不推荐。
(1)百度地图查询行政区域本身不准确，有的地方本来应该属于该区，被划分到其他区了（
2）即使要用百度api，也要注意转换坐标，因为百度，谷歌坐标系不同。贴段转换代码

var x_pi = Math.PI * 3000.0 / 180.0; //将 BD-09 坐标转换成 GCJ-02 坐标(例如：百度坐标-->谷歌坐标) function bd_decrypt(bd_lat, bd_lon){ var x = bd_lon - 0.0065, y = bd_lat - 0.006; var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi); var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi); var gg_lon = z * Math.cos(theta); var gg_lat = z * Math.sin(theta); var result = {}; result.gg_lon = gg_lon; //纬度 result.gg_lat = gg_lat; //经度 return result; }

2.高德地图API文档写的很好，推荐使用高德地图
不完美的地方
1.高德地图API提供的坐标，不能完整的画出一个区的轮廓，比如上海崇明区的被划分成几个小圈，而实际上，应该用一个大圈把崇明区包裹起来
【在谷歌地图上绘制行政区域轮廓【结合高德地图的API】】对应的需求，绘制出上海的所有行政区的轮廓，实现效果

在谷歌地图上绘制行政区域轮廓【结合高德地图的API】
文章图片
image.png 核心代码
showBoundarys(); //显示行政区域 function showBoundarys() { //利用高德地图的【行政区划查询】api获取上海包含的所有区 AMap.service('AMap.DistrictSearch', function() { var opts = { subdistrict: 2,////返回下一级行政区。取值2，可以获取到上海的所有区 extensions: 'all',//返回行政区边界坐标组等具体信息 level: 'city'//查询行政级别为 市 }; //实例化DistrictSearch var district = new AMap.DistrictSearch(opts); //行政区查询 district.search("上海市", function(status, result) { var cityArr = result.districtList[0].districtList[0].districtList; for(var i=0; i

参考网址
1.高德，百度，Google地图定位偏移以及坐标系转换：https://www.jianshu.com/p/8975586a820e
2.坐标拾取工具（GCJ-02坐标） http://zhaoziang.com/amap/picpoint.html
[[图片上传失败...(image-b5744a-1598598023705)]](file:///C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/%E9%85%B8%E5%A5%B6%E5%B0%8F%E5%A6%B9%E7%9A%84%E7%81%AB%E6%98%9F%E5%9D%90%E6%A0%87.html)
3.WGS84、GCJ02、BD09地图坐标系间的坐标转换及坐标距离计算 http://nightfarmer.github.io/2016/12/01/GPSUtil/
4.高德地图的API比百度、谷歌的好用，比如行政区域的坐标比百度的精确，接口文档详细，而谷歌的文档还是英文的，例子也不够全。以后选择地图，首选高德地图
5.高德地图官方demo http://lbs.amap.com/api/javascript-api/example/district-search/draw-district-boundaries
6.地球坐标系 (WGS-84)到火星坐标系 (GCJ-02) Javascript版 https://github.com/hiwanz/wgs2mars.js

    推荐阅读


    上一篇：npm|npm init -y

    下一篇：一个人的记念