【坐标范围计算显示缩放级别zoom自适应显示地图】

本文介绍: 【代码】【坐标范围计算显示缩放级别zoom自适应显示地图】

一.数据：

数据准备

var points = [
    {"lng":116,"lat":40,"status":1,"id":50},
    {"lng":117,"lat":31,"status":1,"id":2},
    {"lng":116,"lat":34,"status":0,"id":3},
    {"lng":118,"lat":39,"status":0,"id":4},
    {"lng":110,"lat":35,"status":1,"id":5}
 ];

计算最大经纬度，最小经纬度。计算中心点。并调用getZoom()获取显示级别。

设置中心点和缩放大小

// 设置中心点和缩放大小  {maxLng, minLng, maxLat, minLat}
setMapCenterZoom(centerObjet){
    // 设置 缩放比例和
    const {maxLng, minLng, maxLat, minLat } =  centerObjet
    const zoom = this.getZoom(maxLng, minLng, maxLat, minLat);
    var cenLng =(parseFloat(maxLng)+parseFloat(minLng))/2;
    var cenLat = (parseFloat(maxLat)+parseFloat(minLat))/2;
    this.map.setCenter(( new TMap.LatLng(cenLat, cenLng)));
    this.map.setZoom(zoom)
},

获取最大值

/**
* 获取最大经纬度
* @param getMaxLngAndLat {Array<Array<Object>>} [[{lat, lng}]]
* @return { Object } {lat lng}
*/
getMaxLngAndLat(paths){
    if(paths.length > 0){
        let maxLng = paths[0].lng;
        let minLng = paths[0].lng;
        let maxLat = paths[0].lat;
        let minLat = paths[0].lat;
        let res;
        for (let i = paths.length - 1; i >= 0; i--) {
            res = paths[i];
            if (res.lng > maxLng) maxLng = res.lng;
            if (res.lng < minLng) minLng = res.lng;
            if (res.lat > maxLat) maxLat = res.lat;
            if (res.lat < minLat) minLat = res.lat;
        }
        return {maxLng, minLng, maxLat, minLat }
    }
},

获取缩放比例

//根据经纬极值计算绽放级别。
getZoom (maxLng, minLng, maxLat, minLat) {
    var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"]//级别18到3。
    var pointA = new TMap.LatLng(maxLat,maxLng);  // 创建点坐标A
    var pointB = new TMap.LatLng(minLat,minLng);  // 创建点坐标B
    var distance = TMap.geometry.computeDistance([pointA,pointB]).toFixed(1);  //获取两点距离,保留小数点后两位
    for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {
        if(zoom[i] - distance > 0){
            return 18-i+3;//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
        }
    };
},

地点坐标计算中心点

/**
* 地点坐标计算中心点
* @param geoCoordinateList {Array<Array<Object>>} [[{lat, lng}]]
* @return { Object } {lat lng}
*/
getCenterPoint(geoCoordinateList) {
    const geoCoordinateListFlat = geoCoordinateList.reduce((s, v) => {
        return (s = s.concat(v))
    }, [])
    const total = geoCoordinateListFlat.length
    let X = 0
    let Y = 0
    let Z = 0
    for (const g of geoCoordinateListFlat) {
        const lat = g.lat * Math.PI / 180
        const lon = g.lng * Math.PI / 180
        const x = Math.cos(lat) * Math.cos(lon)
        const y = Math.cos(lat) * Math.sin(lon)
        const z = Math.sin(lat)
        X += x
        Y += y
        Z += z
    }
    X = X / total
    Y = Y / total
    Z = Z / total
    const Lon = Math.atan2(Y, X)
    const Hyp = Math.sqrt(X * X + Y * Y)
    const Lat = Math.atan2(Z, Hyp)
    return { lng: Lon * 180 / Math.PI, lat: Lat * 180 / Math.PI }
}

完整代码

方法调用

this.listData.forEach(item=>{
    let paths = []
    JSON.parse(item.xq_coordinates).forEach(mapItem=>{
        paths.push( new TMap.LatLng(mapItem.lat, mapItem.lng))
        if(this.listData.length == 1){
            initCenterList.push({lat:mapItem.lat,lng:mapItem.lng})
        }
    })
    const center = new TMap.geometry.computeCentroid(paths) // 获取多边形中心点
    centerList.push(center)
})
//  > 1 多个区域 | 单个区域
let centerObjet = centerList.length > 1 ? this.getMaxLngAndLat(centerList) : this.getMaxLngAndLat(initCenterList)
this.setMapCenterZoom(centerObjet )

方法封装

// 设置中心点和缩放大小  {maxLng, minLng, maxLat, minLat}
setMapCenterZoom(centerObjet){
    // 设置 缩放比例和
    const {maxLng, minLng, maxLat, minLat } =  centerObjet
    const zoom = this.getZoom(maxLng, minLng, maxLat, minLat);
    var cenLng =(parseFloat(maxLng)+parseFloat(minLng))/2;
    var cenLat = (parseFloat(maxLat)+parseFloat(minLat))/2;
    this.map.setCenter(( new TMap.LatLng(cenLat, cenLng)));
    this.map.setZoom(zoom)
},
//根据经纬极值计算绽放级别。
getZoom (maxLng, minLng, maxLat, minLat) {
        var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"]//级别18到3。
        var pointA = new TMap.LatLng(maxLat,maxLng);  // 创建点坐标A
        var pointB = new TMap.LatLng(minLat,minLng);  // 创建点坐标B
        var distance = TMap.geometry.computeDistance([pointA,pointB]).toFixed(1);  //获取两点距离,保留小数点后两位
        for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {
            if(zoom[i] - distance > 0){
                return 18-i+2;//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
            }
        };
},
// 获取最大经纬度
getMaxLngAndLat(paths){
    if(paths.length > 0){
        let maxLng = paths[0].lng;
        let minLng = paths[0].lng;
        let maxLat = paths[0].lat;
        let minLat = paths[0].lat;
        let res;
        for (let i = paths.length - 1; i >= 0; i--) {
            res = paths[i];
            if (res.lng > maxLng) maxLng = res.lng;
            if (res.lng < minLng) minLng = res.lng;
            if (res.lat > maxLat) maxLat = res.lat;
            if (res.lat < minLat) minLat = res.lat;
        }
        return {maxLng, minLng, maxLat, minLat }
    }
},