移动地图时自动获取当前地图中心地区

YancyYe 发布于2019-08-26 11:41 / 1929人阅读

摘要：原文链接的博客问题来源使用百度地图时，移动地图我们发现百度地图右上角的地区名称是随当前地图显示区域自动变化的。分析当前屏幕每个区域的面积占比即可获取当前地图区域。

原文链接：Bougie的博客

问题来源

使用百度地图时，移动地图,我们发现百度地图右上角的地区名称是随当前地图显示区域自动变化的。对此，我仿写了一个计算地图当前区域的方法。

解决思路

地图整个屏幕是一个矩形，为了方便计算，我们可以把地图每个城市也看成矩形，即为城市的Extent或BBox。如图所示。分析当前屏幕每个区域的面积占比即可获取当前地图区域。

代码实现

地图引擎推荐使用maptalks。准备好areaExtent JSON数据，数据格式如下所示：

[{
    "name": "密云县",
    "cp": [117.0923, 40.5121],
    "id": 110228,
    "extent": [116.6776, 40.223, 117.507, 40.8012]
}, {
    "name": "怀柔区",
    "cp": [116.6377, 40.6219],
    "id": 110116,
    "extent": [116.2875, 40.2292, 116.8863, 41.0607]
}, {
    "name": "房山区",
    "cp": [115.8453, 39.7163],
    "id": 110111,
    "extent": [115.4361, 39.5082, 116.2546, 39.925]
}...]

首先准备辅助函数

/**
* 获取两个矩形交叉的矩形
* 
* @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]
}

/**
* 获得两个点距离的平方
* 
* @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,    // 计算屏幕地图中间区域城市占比，提高准确度
        minRatio = 0.7            // 最小占比，城市面积占比大于此占比时进入候选
map.on("viewchange", function (evt) {
    let extent = map.getExtent(),
        xOffset = (extent.xmax - extent.xmin) * centerOffset,
        yOffset = (extent.ymax - extent.ymin) * centerOffset,
        // 地图中央50%区域
        mainExtent = [extent.xmin + xOffset, extent.ymin + yOffset, extent.xmax - xOffset, extent.ymax - yOffset],  // 地图中央50%区域边界矩形
        mainCenter = square.getCenter(mainExtent),    // 地图中央50%区域中心
        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即为地图当前显示地区。

服务器托管云服务器地图地区相邻问题可移动地图 html获取地图海拔地图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107371.html

移动地图时自动获取当前地图中心地区

摘要：原文链接的博客问题来源使用百度地图时，移动地图我们发现百度地图右上角的地区名称是随当前地图显示区域自动变化的。分析当前屏幕每个区域的面积占比即可获取当前地图区域。原文链接：Bougie的博客问题来源使用百度地图时，移动地图,我们发现百度地图右上角的地区名称是随当前地图显示区域自动变化的。对此，我仿写了一个计算地图当前区域的方法。showImg(https://segmentfau...

xingpingz 2019-08-01 18:35 评论0 收藏0
2017中国云计算评测报告

摘要：当前国内云计算服务仍处于单打独斗，提供单向服务的阶段，完整生态模式尚未搭建完成。注特别说明的是，评测期间我们随机抽取了金山云位于北京区的机房用于验证评测，属传统扁平网络，此机房在本次报告发布时已不再售卖。 ➨ 报告电子版至听云官方博客下载：http://blog.tingyun.com/web/a... 评测说明评测目标：同一应用（网站）在不同云上的用户访问体验，以及对云资源的使用洞...

changfeng1050 2019-06-28 10:53 评论0 收藏0
国内值得关注的官方API集合

摘要：电影豆瓣电影豆瓣电影支持电影条目，影人条目，搜索和榜单等。音乐豆瓣音乐支持音乐信息，评论信息，标签信息，搜索音乐，某个音乐中标记最多的标签，发表修改删除评论，用户对音乐的所有标签等内容。项目地址：https://github.com/marktony/A... 本页仅收集国内部分官方API，如需查看其他版本，请点击这里。目录笔记出行词典电商地图电影即时通讯开发者网...

gaomysion 2019-06-25 11:01 评论0 收藏0
国内值得关注的官方API集合

摘要：电影豆瓣电影豆瓣电影支持电影条目，影人条目，搜索和榜单等。音乐豆瓣音乐支持音乐信息，评论信息，标签信息，搜索音乐，某个音乐中标记最多的标签，发表修改删除评论，用户对音乐的所有标签等内容。项目地址：https://github.com/marktony/A... 本页仅收集国内部分官方API，如需查看其他版本，请点击这里。目录笔记出行词典电商地图电影即时通讯开发者网...

miqt 2019-08-06 10:44 评论0 收藏0
国内值得关注的官方API集合

摘要：电影豆瓣电影豆瓣电影支持电影条目，影人条目，搜索和榜单等。音乐豆瓣音乐支持音乐信息，评论信息，标签信息，搜索音乐，某个音乐中标记最多的标签，发表修改删除评论，用户对音乐的所有标签等内容。项目地址：https://github.com/marktony/A... 本页仅收集国内部分官方API，如需查看其他版本，请点击这里。目录笔记出行词典电商地图电影即时通讯开发者网...

coordinate35 2019-06-25 15:56 评论0 收藏0