mapboxGL中popup遮挡的优化

时间:2022-07-22
本文章向大家介绍mapboxGL中popup遮挡的优化，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

概述

在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));
});

随机文章
本站知识点必读
最近更新