高德地图点聚合及点击放大

1、使用setZoomAndCenter方法即可实现此功能，将方法放置到对应位置内。

map.setZoomAndCenter(17, XY)

image.png

2、多个高德坐标列表，求最佳放大倍数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);

3、点聚合示例地址
https://gitcode.com/KyleBing/map/blob/master/src/page/pointer/PointerViewer.vue?utm_source=csdn_github_accelerator&isLogin=1

csdn介绍：https://blog.csdn.net/KimBing/article/details/135507505

uniapp文档

image.png

最后编辑于：2024.05.27 18:06:54