这篇文章是之前我在博客园发表的一篇文章(在谷歌地图上绘制行政区域轮廓
)，刚好最近有朋友问到类似的问题，加上博客园已经不写博客，所以打算迁移到简书。
需求
希望在谷歌地图上绘制一个城市的县区级行政区轮廓。
困难点
谷歌地图未提供【行政区查询的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提供的坐标，不能完整的画出一个区的轮廓，比如上海崇明区的被划分成几个小圈，而实际上，应该用一个大圈把崇明区包裹起来
对应的需求，绘制出上海的所有行政区的轮廓，实现效果
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<cityArr.length;i++){
showBoundary(cityArr[i].adcode);
}
})
});
}
/**
* 用adcode(区域编码)查询，可以唯一定位到具体的地址。
* 用name(行政区名称)可能查出多个地址，不精确
*/
function showBoundary(adcode) {
//利用高德地图的【行政区划查询】api获取每个区的行政区边界坐标点，再根据这些坐标点在谷歌地图上绘制区域轮廓线
//加载行政区划插件
AMap.service('AMap.DistrictSearch', function() {
var opts = {
subdistrict: 0, //返回下一级行政区
extensions: 'all', //返回行政区边界坐标组等具体信息
level: 'district' //查询行政级别为 市
};
//实例化DistrictSearch
var district = new AMap.DistrictSearch(opts);
district.setLevel('district');
//行政区查询
district.search(adcode, function(status, result) {
var bounds = result.districtList[0].boundaries;
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {//每个区域可能有分能几个小块，比如金山区除了有一块陆地圈，还有海上独立的三个小岛
var boundsItem = bounds[i];
var triangleCoords = [];
for(var j = 0; j < boundsItem.length; j++){
triangleCoords.push(new google.maps.LatLng(boundsItem[j].lat, boundsItem[j].lng));
}
var bermudaTriangle = new google.maps.Polygon({
paths : triangleCoords,
strokeColor : "#1c49ff",
strokeOpacity : 0.8,
strokeWeight : 1,
// fillColor : "#FF0000",
fillOpacity : 0,
text:"xxxxx"
});
bermudaTriangle.setMap(map);
map.setZoom(9);
}
}
});
});
}
参考网址
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
网友评论