博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动地图时自动获取当前地图中心地区
阅读量:6643 次
发布时间:2019-06-25

本文共 2688 字,大约阅读时间需要 8 分钟。

原文地址:

使用百度地图时,我们发现百度地图右上角的地区名称是自动变化的。地图整个屏幕是一个矩形,为了方便计算,我们可以把地图每个城市也看成矩形,即为城市的Extent或BBox。分析当前屏幕每个区域的面积占比即可获取当前地图区域。

问题来源

使用百度地图时,我们发现百度地图右上角的地区名称是自动变化的。

image

解决思路

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

image

代码实现

地图引擎推荐使用maptalks。首先获取当前屏幕地图的Extent。

let extent = map.getExtent()

准备好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],        mainCenter = square.getCenter(mainExtent),        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即为地图当前显示地区。

转载于:https://www.cnblogs.com/bougie/p/8999934.html

你可能感兴趣的文章
linux之uniq用法
查看>>
java编程心得(持续更新)
查看>>
JavaScript强化教程——jQuery - 获得内容和属性
查看>>
Redis时延问题分析及应对
查看>>
常用Python机器学习库有哪些?
查看>>
10个好用的Python集成开发环境
查看>>
oracle之rman入门指南
查看>>
python脚本小游戏,剪刀石头布.
查看>>
PHP保留小数位的三种方法
查看>>
Java之品优购部署_day01(1)
查看>>
理解VueJs模板
查看>>
百度i账户荣膺2018全球物联网大会最佳创新合作伙伴奖
查看>>
智能分布式保护测控单元综合测控通信单元
查看>>
使用函数计算对表格存储中数据做简单清洗
查看>>
【技术解析】如何用Docker实现SequoiaDB集群的快速部署
查看>>
linux cpu内存利用率获取
查看>>
java install
查看>>
MyBatis学习总结一 —— MyBatis的使用步骤及配置
查看>>
如何构建高性能MySQL索引
查看>>
PDF怎么删除空白页面,你知道用什么方法吗?
查看>>