摘要：原文鏈接的博客問題來(lái)源使用百度地圖時(shí)，移動(dòng)地圖我們發(fā)現(xiàn)百度地圖右上角的地區(qū)名稱是隨當(dāng)前地圖顯示區(qū)域自動(dòng)變化的。分析當(dāng)前屏幕每個(gè)區(qū)域的面積占比即可獲取當(dāng)前地圖區(qū)域。

原文鏈接：Bougie的博客

使用百度地圖時(shí)，移動(dòng)地圖,我們發(fā)現(xiàn)百度地圖右上角的地區(qū)名稱是隨當(dāng)前地圖顯示區(qū)域自動(dòng)變化的。對(duì)此，我仿寫了一個(gè)計(jì)算地圖當(dāng)前區(qū)域的方法。

地圖整個(gè)屏幕是一個(gè)矩形，為了方便計(jì)算，我們可以把地圖每個(gè)城市也看成矩形，即為城市的Extent或BBox。如圖所示。分析當(dāng)前屏幕每個(gè)區(qū)域的面積占比即可獲取當(dāng)前地圖區(qū)域。

地圖引擎推薦使用maptalks。準(zhǔn)備好areaExtent JSON數(shù)據(jù)，數(shù)據(jù)格式如下所示：

[{
    "name": "密云縣",
    "cp": [117.0923, 40.5121],
    "id": 110228,
    "extent": [116.6776, 40.223, 117.507, 40.8012]
}, {
    "name": "懷柔區(qū)",
    "cp": [116.6377, 40.6219],
    "id": 110116,
    "extent": [116.2875, 40.2292, 116.8863, 41.0607]
}, {
    "name": "房山區(qū)",
    "cp": [115.8453, 39.7163],
    "id": 110111,
    "extent": [115.4361, 39.5082, 116.2546, 39.925]
}...]

首先準(zhǔn)備輔助函數(shù)

/**
* 獲取兩個(gè)矩形交叉的矩形
* 
* @param {any} rectA [startX, startY, endX, endY]
* @param {any} rectB [startX, startY, endX, endY]
* @returns 
*/
function getCrossRect(rectA, rectB) {
    if (rectB[0] > rectA[2] || rectB[2] < rectA[0] || rectB[1] > rectA[3] || rectB[3] < rectA[1]) return [0, 0, 0, 0]
    let startX = rectA[0] > rectB[0] ? rectA[0] : rectB[0],
        startY = rectA[1] > rectB[1] ? rectA[1] : rectB[1],
        endX = rectA[2] < rectB[2] ? rectA[2] : rectB[2],
        endY = rectA[3] < rectB[3] ? rectA[3] : rectB[3]
    return [startX, startY, endX, endY]
}

/**
* 矩形面積
* 
* @param {any} rect [startX, startY, endX, endY]
* @returns 
*/
function square(rect) {
    return (rect[2] - rect[0]) * (rect[3] - rect[1])
}

/**
* 獲取矩形中心
* 
* @param {any} rect [startX, startY, endX, endY]
* @returns 
*/
function getCenter(rect) {
    return [(rect[0] + rect[2]) / 2, (rect[1] + rect[3]) / 2]
}

/**
* 獲得兩個(gè)點(diǎn)距離的平方
* 
* @param {any} pA 
* @param {any} pB 
* @returns 
*/
function lineLength(pA, pB) {
    return (pA[0] - pB[0]) ** 2 + (pA[1] - pB[1]) ** 2
}

export default {
    getCrossRect,
    square,
    getCenter,
    lineLength
}

命名為square.js。

在地圖縮放或平移后（viewchange）遍歷areaExtent：

const centerOffset = 0.25,    // 計(jì)算屏幕地圖中間區(qū)域城市占比，提高準(zhǔn)確度
        minRatio = 0.7            // 最小占比，城市面積占比大于此占比時(shí)進(jìn)入候選
map.on("viewchange", function (evt) {
    let extent = map.getExtent(),
        xOffset = (extent.xmax - extent.xmin) * centerOffset,
        yOffset = (extent.ymax - extent.ymin) * centerOffset,
        // 地圖中央50%區(qū)域
        mainExtent = [extent.xmin + xOffset, extent.ymin + yOffset, extent.xmax - xOffset, extent.ymax - yOffset],  // 地圖中央50%區(qū)域邊界矩形
        mainCenter = square.getCenter(mainExtent),    // 地圖中央50%區(qū)域中心
        candidate = areaExtent.filter(i => {
            let crossRect = square.getCrossRect(i.extent, mainExtent)    // 城市與屏幕地圖中心交叉的矩形
            return square.square(crossRect) / square.square(mainExtent) > minRatio    // 篩選候選城市
        })
    let curArea = candidate.sort((a, b) => {
        return square.lineLength(a.cp, mainCenter) - square.lineLength(b.cp, mainCenter)
    })[0]    // 獲得距離地圖中心距離最短的城市
})

最終，我們獲得的curArea即為地圖當(dāng)前顯示地區(qū)。