地图多点自动缩放，居中，思路和手写

news2024/11/16 0:20:20

效果如下

多个标记点顺次标记连接起来
zoom缩放到合适等级，刚好能放下那么多点
视野刚好在正中间

zoom 实现思路

获取多点的最大经纬度点和最小经纬度点（这两个点相距离最远）
计算2个这两点之间的距离
地图是有比例尺的，根据比例尺可以得到1cm对应的zoom值
根据要展示的长度，适当调整zoom大小

实现

// 多点
const points = [
    { latitude: 39.87, longitude: 116.38 },
    { latitude: 31.25, longitude: 121.46 },
    { latitude: 30.271, longitude: 119.98 },
    { latitude: 30.2737514, longitude: 120.1358911 }
],

// 转换成标准数据 { lat: 39.87, lng: 116.38 },
// 获取最大和最小经纬度值
let list = [];
let lngMax = data[0].longitude;
let lngMin = data[0].longitude;
let latMax = data[0].latitude;
let latMin = data[0].latitude;
list = r.data.map((item: any, index: number) => {
	if (item.longitude > lngMax) {
	  lngMax = item.longitude;
	}
	if (item.longitude < lngMin) {
	  lngMin = item.longitude;
	}
	if (item.latitude > latMax) {
	  latMax = item.latitude;
	}
	if (item.latitude < latMin) {
	  latMin = item.latitude;
	}
	return {
		lat: item.latitude,
	  	lng: item.longitude,
	};
});

// zoom计算方法 记得引入'./calculateZoom.tsx',下面有
let zoom = calculateZoom(latMin, lngMin, latMax, lngMax);
// 中心点坐标 
const latCenter = ((latMax + latMin) * 500000) / 1000000;
const lngCenter = ((lngMax + lngMin) * 500000) / 1000000;
// 调用更新中心点方法 这个方法自己写，大同小异
updateCenter({ lat: latCenter, lng: lngCenter })

引入的calculateZoom.tsx文件

const getDistance = (lat1: number, lng1: number, lat2: number, lng2: number) => {
  var dis = 0;
  var radLat1 = toRadians(lat1);
  var radLat2 = toRadians(lat2);
  var deltaLat = radLat1 - radLat2;
  var deltaLng = toRadians(lng1) - toRadians(lng2);
  var dis =
    2 *
    Math.asin(
      Math.sqrt(
        Math.pow(Math.sin(deltaLat / 2), 2) +
          Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2),
      ),
    );
  return dis * 6378137;
};

/**
 * 
 * @param distance 
 * 百度地图缩放级别与比例尺对应数值
  百度地图缩放级别从19~1，共分为19级，级别越大，范围越小：
  [19级，18级，17级，16级，15级，14级，13级，12级，11级，10级，9级，8级，7级，6级，5级，4级，3级，2级，1级]
  其分别对应的比例尺为：
  [1:20米（简称20米，后同），50米，100米，200米，500米，1公里，2公里，5公里，10公里，
  20公里，25公里，50公里，100公里，200公里，500公里，1000公里，2000公里，5000公里，10000公里]
 */
const getZoom = (distance: number) => {
  // 注意这里是1cm比例展示
  let zoom = 0;
  if (distance > 10000000) {
    zoom = 1;
  } else if (distance > 5000000) {
    zoom = 2;
  } else if (distance > 2000000) {
    zoom = 3;
  } else if (distance > 1000000) {
    zoom = 4;
  } else if (distance > 500000) {
    zoom = 5;
  } else if (distance > 200000) {
    zoom = 6;
  } else if (distance > 100000) {
    zoom = 7;
  } else if (distance > 50000) {
    zoom = 8;
  } else if (distance > 25000) {
    zoom = 9;
  } else if (distance > 20000) {
    zoom = 10;
  } else if (distance > 10000) {
    zoom = 11;
  } else if (distance > 5000) {
    zoom = 12;
  } else if (distance > 2000) {
    zoom = 13;
  } else if (distance > 1000) {
    zoom = 14;
  } else if (distance > 500) {
    zoom = 15;
  } else if (distance > 200) {
    zoom = 16;
  } else if (distance > 100) {
    zoom = 17;
  } else if (distance > 50) {
    zoom = 18;
  } else if (distance > 20) {
    zoom = 19;
  } else {
    // 默认缩放值
    zoom = 12;
  }
  return zoom;
};
// 入参最小经纬度点和最大经纬度点
export const calculateZoom = (latMin: number, lngMin: number, latMax: number, lngMax: number) => {
  // 计算两个点之间距离
  let distance = getDistance(latMin, lngMin, latMax, lngMax);
  // 根据距离计算对应的zoom
  let zoom = getZoom(distance / 4); // 这里除以4是为了展示的范围在4-8cm之间（大致按照2的2次方缩放）
  return zoom;
};