一.數(shù)據(jù)：

數(shù)據(jù)準(zhǔn)備

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}
 ];

計算最大經(jīng)緯度，最小經(jīng)緯度。計算中心點。并調(diào)用getZoom()獲取顯示級別。

設(shè)置中心點和縮放大小

// 設(shè)置中心點和縮放大小  {maxLng, minLng, maxLat, minLat}
setMapCenterZoom(centerObjet){
    // 設(shè)置 縮放比例和
    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)
},

獲取最大值

/**
* 獲取最大經(jīng)緯度
* @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 }
    }
},

獲取縮放比例

//根據(jù)經(jīng)緯極值計算綻放級別。
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);  // 創(chuàng)建點坐標(biāo)A
    var pointB = new TMap.LatLng(minLat,minLng);  // 創(chuàng)建點坐標(biāo)B
    var distance = TMap.geometry.computeDistance([pointA,pointB]).toFixed(1);  //獲取兩點距離,保留小數(shù)點后兩位
    for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {
        if(zoom[i] - distance > 0){
            return 18-i+3;//之所以會多3，是因為地圖范圍常常是比例尺距離的10倍以上。所以級別會增加3。
        }
    };
},

地點坐標(biāo)計算中心點

/**
* 地點坐標(biāo)計算中心點
* @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 }
}

完整代碼

方法調(diào)用

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 多個區(qū)域 | 單個區(qū)域
let centerObjet = centerList.length > 1 ? this.getMaxLngAndLat(centerList) : this.getMaxLngAndLat(initCenterList)
this.setMapCenterZoom(centerObjet )

方法封裝

// 設(shè)置中心點和縮放大小  {maxLng, minLng, maxLat, minLat}
setMapCenterZoom(centerObjet){
    // 設(shè)置 縮放比例和
    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)
},
//根據(jù)經(jīng)緯極值計算綻放級別。
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);  // 創(chuàng)建點坐標(biāo)A
        var pointB = new TMap.LatLng(minLat,minLng);  // 創(chuàng)建點坐標(biāo)B
        var distance = TMap.geometry.computeDistance([pointA,pointB]).toFixed(1);  //獲取兩點距離,保留小數(shù)點后兩位
        for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {
            if(zoom[i] - distance > 0){
                return 18-i+2;//之所以會多3，是因為地圖范圍常常是比例尺距離的10倍以上。所以級別會增加3。
            }
        };
},
// 獲取最大經(jīng)緯度
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 }
    }
},

文章來源地址http://www.zghlxwxcb.cn/news/detail-794267.html

到了這里，關(guān)于【坐標(biāo)范圍計算顯示縮放級別zoom自適應(yīng)顯示地圖】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！