多个高德坐标列表,求最佳放大倍数zoom及中心点

首先一些地图知识,在地图瓦片系统中,每个瓦片的尺寸通常是256x256像素。这意味着地图在水平和垂直方向上被划分为256个像素的瓦片。 在计算最佳放大级别时,我们使用WORLD_DIM来表示地球的宽度和高度。通过将地图的宽度和高度转换为地球上的度数,然后与WORLD_DIM相除,可以得到地图上每个像素对应的地球上的度数。 因此,WORLD_DIM的值为256是根据地图瓦片系统的标准尺寸而来,用于在计算中将像素值转换为地球上的度数。高德、腾讯等都使用Google的瓦片地图规范,其定义略有不同,坐标原点为东经180°、北纬85.05°,x轴向右,y轴向下,zoom level最小为0、最大为21。瓦片相关内容参考瓦片地图服务与地图瓦片原理

在计算最佳放大级别时,将地图的宽度和高度乘以360是为了将地图的像素值转换为地球上的度数。 地球的经度范围是-180度到+180度,纬度范围是-90度到+90度。而地图的宽度和高度是以像素为单位的。 通过乘以360,我们将地图的像素值映射到地球上的度数范围。这样可以将地图的尺寸与地球上的度数进行比较,以计算最佳放大级别和中心点。 例如,如果地图的宽度是800像素,乘以360后得到288000,表示地图在水平方向上覆盖了288000度的经度范围。这样就可以将地图的尺寸与地球上的度数进行比较,从而计算出最佳放大级别和中心点。

中心点获取最大最小经纬度取平均值即可

下面是代码

export const getBounds = (coordinates: [number, number][]): [number[], number[]] => {
    let minLat = Number.MAX_VALUE;
    let maxLat = Number.MIN_VALUE;
    let minLng = Number.MAX_VALUE;
    let maxLng = Number.MIN_VALUE;

    for (const coordinate of coordinates) {
        const lat = coordinate[0];
        const lng = coordinate[1];
        minLat = Math.min(minLat, lat);
        maxLat = Math.max(maxLat, lat);
        minLng = Math.min(minLng, lng);
        maxLng = Math.max(maxLng, lng);
    }

    return [[maxLat, maxLng], [minLat, minLng]];
}

export const getZoomLevel = (bounds: [number[], number[]], mapDim: [number, number]): number => {
    const WORLD_DIM = 256;
    const ZOOM_MAX = 21;

    const ne = bounds[0];
    const sw = bounds[1];

    const latDiff = ne[0] - sw[0];
    const lngDiff = ne[1] - sw[1];

    const latZoom = Math.log(mapDim[0] * 360 / latDiff / WORLD_DIM) / Math.log(2);
    const lngZoom = Math.log(mapDim[1] * 180 / lngDiff / WORLD_DIM) / Math.log(2);
    return Math.min(Math.min(latZoom, lngZoom), ZOOM_MAX);
}

export const getCenterPoint = (bounds: [number[], number[]]): [number, number] =>{
    const ne = bounds[0];
    const sw = bounds[1];

    const lat = (ne[0] + sw[0]) / 2;
    const lng = (ne[1] + sw[1]) / 2;

    return [lat, lng];
}


 // 示例用法
const coordinates = [
  [30.123, 120.456],
  [31.789, 121.789],
  [32.456, 122.123],
  // 添加更多坐标点
];
const bounds = getBounds(coordinates);
const mapDim = [800, 600];
const zoomLevel = getZoomLevel(bounds, mapDim);
const centerPoint = getCenterPoint(bounds);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值