Question

我在地图上放置了许多不同城市的自定义叠加层，并试图隐藏/折叠重叠的叠加层。无论哪里有空间，我都想展示/扩展人口最多的地方。

我想实现与google flights (explore section)完全相同的行为。

我尝试过的事情

我尝试了以下方法。我循环浏览所有自定义叠加层，检查是否有重叠，然后隐藏是否有较高的填充层。问题是太多的东西被隐藏了，请参见以下示例：

A市（3000名人口）
城市B（2000人口）
城市C（1000人口）
A和B重叠
B和C重叠
A和C不重叠

A和C都应该可见，但是C隐藏了，因为B和C重叠并且B的人口更多。

请注意，我正在使用Angular，但这是一个通用的js问题。

hideOverlays(){

  this.overlays.forEach(mainElement => {
    let hide = false;

    this.overlays.forEach(compareElement => {
      if(this.checkOverlap(mainElement.nativeElement, compareElement.nativeElement)){
        if(mainElement.nativeElement.dataset.population < compareElement.nativeElement.dataset.population){
          hide = true
        }
      }
    })

    if(hide){
      mainElement.nativeElement.style.display = "none";
    }else{
      mainElement.nativeElement.style.display = "flex";
    }
  });
}

checkOverlap(element1, element2) {
  const rect1 = element1.getBoundingClientRect();
  const rect2 = element2.getBoundingClientRect();

  const overlap = !(rect1.right < rect2.left || 
                    rect1.left > rect2.right || 
                    rect1.bottom < rect2.top || 
                    rect1.top > rect2.bottom)
  return overlap;
}

有人知道如何正确执行此操作吗？如果我前进的方向效率不高，我也愿意采取完全不同的方法。

Answer 1

我找到了解决方案。不确定这是否是最好的方法，但是它有效。

我首先创建一个带有叠加元素，填充和hidden=false的对象数组。然后，我循环浏览并将每个元素与所有其他元素进行比较。如果元素重叠并且main.hidden == true和main.population >= compare.population重叠，则将比较元素设置为hidden == true。这样，隐藏的元素不会导致其他元素隐藏。

请注意，我的原始数组已经按总体进行了排序，此顺序对于正确地进行工作很重要。

最后，我再次循环浏览元素，并根据元素是否隐藏将类和样式添加到元素中。

filterLocations(){
  let overlayArray = [];

  this.overlays.forEach(element => {
    const overlayObj = {element: element.nativeElement, population: Number(element.nativeElement.dataset.population), hidden: false};
    overlayArray.push(overlayObj);
  })

  overlayArray.forEach( (main, i) => {
    overlayArray.forEach( (compare, j) => {
      if(i != j && !main.hidden && main.population >= compare.population && this.checkOverlap(compare.element, main.element)){
        overlayArray[j].hidden = true;
      }
    })
  })

  overlayArray.forEach( (obj, i) => {
    if(!obj.hidden){
      obj.element.classList.add("expanded");
      obj.element.style.pointerEvents = 'auto';
      obj.element.style.zIndex = overlayArray.length + overlayArray.length - i;
    }else{
      obj.element.classList.remove("expanded");
      obj.element.style.pointerEvents = 'none'; 
      obj.element.style.zIndex = overlayArray.length - i;
    }
  })
}

checkOverlap(element1, element2) {
  const rect1 = element1.getBoundingClientRect();
  const rect2 = element2.getBoundingClientRect();

  return !(rect1.right < rect2.left || 
           rect1.left > rect2.right || 
           rect1.bottom < rect2.top || 
           rect1.top > rect2.bottom)
}

Google Maps Api V3-隐藏重叠的自定义叠加层

1 个答案: