在百度地图中可以根据一组坐标点设置地图的最佳视角,但是针对只有一个中心点坐标的圆形覆盖物却没有提供设置最佳视角的API方法,只能自己另外实现,实现思路是根据圆形遮盖物的直径算出对应的地图缩放层级。
下面的表格是每个层级对应的距离比例,从最高层往下推可以得出的规律是每下一级对应的比列大约是上一级的两倍,例:
18级≈19级x2
17级=18级x2
16级=17级x2
15级≈16级x2
14级=15级x2
13级=12级x2
…
| 级别 | 比例尺 |
|---|---|
| 19级 | 20m |
| 18级 | 50m |
| 17级 | 100m |
| 16级 | 200m |
| 15级 | 500m |
| 14级 | 1km |
| 13级 | 2km |
| 12级 | 5km |
| 11级 | 10km |
| 10级 | 20km |
| 9级 | 25km |
| 8级 | 50km |
| 7级 | 100km |
| 6级 | 200km |
| 5级 | 500km |
| 4级 | 1000km |
| 3级 | 2000km |
| 2级 | 5000km |
| 1级 | 10000km |
初始实现代码:
let diameter = 1000; //圆直径
let zoom = 20; //地图层级数(百度地图默认为19级,这里多加1级方便下面通过直径的运算得出地图对应的层级)
let num = 20; //尺寸基数,对应19级的20m
/* 从最高级往下推,基数每次乘以2后的值还在圆直径的范围内则zoom减去一级,循环类推 */
while (num < diameter) {
num = num * 2;
zoom--;
}
console.log(zoom); //14
最终代码如下:
因圆形覆盖物设置的是半径,为了方便计算参数使用半径,最终在设置zoom时加了2级,优化显示效果。
/**
* 设置圆覆盖物最佳视角
* @param {Point} point 百度坐标点对象
*/
setCircleBestViewport(point, radius) {
let zoom = 20; //地图层级数(百度地图默认为19层,这里多加1层使下面通过直径的运算刚好可以得出地图对应的层级)
let num = 20; //基数
let diameter = radius *2; //直径
while (num < radius) {
num = num * 2;
zoom--;
}
map.centerAndZoom(point, zoom + 2); //设置中心点和缩放层级,为了优化显示效果此处zoom多加2级
}

本文介绍了一种根据圆形覆盖物的直径计算百度地图最佳视角缩放层级的方法,通过算法自动调整地图显示范围,优化用户体验。
3276

被折叠的 条评论
为什么被折叠?



