概述

在MapboxGL中，使用popup弹窗时，弹窗会出现超出范围的情况，本文就此问题做了点优化，共享记录下，一做自用，一做共享。

实现效果

实现代码

结合popup的open事件，实现位置的调整。实现代码如下：

// 调整popup位置
that.popup.on('open', function(){var ele = $(that.popup.getElement());var offset = ele.offset();var top = offset.top;var left = offset.left;var right = ele.width() + left;var mapEle = $(map.getContainer());var mapOffset = mapEle.offset();var mapTop = mapOffset.top;var mapLeft = mapOffset.left;var mapRight = mapEle.width() + mapLeft;var center = map.getCenter();var centerPx = map.project(center);var h = 0, v = 0, size = 20;if(top < mapTop) {v = mapTop - top + size;}if(left < mapLeft) {h = mapLeft - left + size;}if(right > mapRight) {h = mapRight - right - size;}centerPx = [centerPx.x - h, centerPx.y - v];map.panTo(map.unproject(centerPx));
});

mapboxGL中popup遮挡的优化相关推荐

目标检测中的遮挡问题及优化
文章目录 1 Repulsion Loss: Detecting Pedestrians in a Crowd 1.1 现有方法的缺点 1.2 解决办法 1.3 对问题做数学建模 1.3.1 引力作用 ...
解决目标检测中密集遮挡问题——Repulsion loss
解决目标检测中密集遮挡问题--Repulsion loss Rep loss Attr RepGT RepBox 之前参加了df的钢筋检测比赛,比赛中的一个难点是密集遮挡问题,为了解决这个问题,参考了 ...
2021综述：一般目标检测中的遮挡处理
目录综述:通用对象检测中的遮挡处理 1.简介 2.目标检测的应用 3.数据集 4.户外场景的遮挡处理 A.数据收集 B.遮挡检测 C.生成遮挡区域 D.遮挡目标检测 5.室内场景中的遮挡处理 A.场 ...
对于人脸识别检测中出现遮挡问题的解决方案
人脸识别中发型遮挡检测方法研究摘要: 人脸识别中,发型遮挡是一种十分常见的遮挡类型,并且对人脸的正确识别具有极大的干扰.提出一种将头发的颜色模型和发型特征相结合的遮挡检测方法.首先,采用机器学习的方 ...
谈谈深度学习目标检测中的遮挡问题
引自:"别挡我,我要C位出道!"谈谈深度学习目标检测中的遮挡问题 - Naiyan Wang的文章 - 知乎 https://zhuanlan.zhihu.com/p/436559 ...
AI中pass架构设计优化
AI中pass架构设计优化 Relay 和 TVM IR,包含一系列优化passes,可提高模型的性能指标,例如平均推理,内存占用,或特定设备的功耗.有一套标准优化,及特定机器学习的优化,包括常量折叠 ...
DRO：SFM任务中的深度循环优化器（阿里巴巴AI Lab）
代码.论文地址:在公众号「3D视觉工坊」,后台回复「DRO」,即可直接下载. Motivation: 解决一个优化问题,常见的优化器比如梯度下降法, 牛顿法等, 一般会先计算梯度------>再 ...
计算机算法对程序设计的作用,计算机编程中数学算法的优化策略
李钰摘要:在计算机编程中,合理地运用数学算法所拥有的优势不但可以完好地针对所拥有的问题进行总结分类归纳,还可以将其归纳作为基础从而进行针对性的统一计算,并且能够将非常复杂的问题进行整体的简化并且将其 ...
企业网络推广专员浅析企业网络推广中网站关键词排名优化有何技巧？
自从企业网站上线运营之后,站长通过对企业网站自身定位规划的优化策略逐步展开优化进程,利用熟知的网站优化方法帮助企业网站快速获得搜索引擎收录,有了收录更能为用户呈现出企业网站优质的一面,获得良好排名助力 ...

mapboxGL中popup遮挡的优化

概述

实现效果

实现代码

mapboxGL中popup遮挡的优化相关推荐

最新文章

热门文章