在谷歌地图上绘制行政区域轮廓【结合高德地图的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】_第1张图片
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

你可能感兴趣的:(在谷歌地图上绘制行政区域轮廓【结合高德地图的API】)