javascript - 传单:按缩放级别获取缩放的边界框

Question

我正在尝试对下一个边界的外观做出预测。这是一个plunkr:
https://plnkr.co/edit/sk6NRh51WZA2vpWP
这就是我让它工作的方式，但它不是很有效:

const originalMapElement = document.getElementById('map');
const lMap: any = L.map(originalMapElement);


// working but very inefficient
// ----------------------------
function getScaledBounds(center, zoom) {
  const fakeDiv = document.createElement("div");
  fakeDiv.style.display = "block";
  fakeDiv.style.visibility = "hidden";
  fakeDiv.style.width = originalMapElement.offsetWidth + "px";
  fakeDiv.style.height = originalMapElement.offsetHeight + "px";
  document.body.appendChild(fakeDiv);
  const fakeMap = L.map(fakeDiv);
  fakeMap.setView(center, zoom, { animate: false });
  return fakeMap.getBounds();
}

我的另外两种编程方法非常接近，产生的结果与上面的第一个函数几乎但不完全相同:

function getScaledBounds(center, zoom) {
  const centerPoint = lMap.project(center, zoom);
  const viewHalf = lMap.getSize().divideBy(2);
  const projectedBox = new L.Bounds(centerPoint.subtract(viewHalf), centerPoint.add(viewHalf));
  return L.latLngBounds(
    lMap.unproject(projectedBox.getBottomLeft(), zoom),
    lMap.unproject(projectedBox.getTopRight(), zoom),
  );
}

function getScaledBounds(center, zoom) {
  const zoomFactor = Math.pow(2, zoom) * 2;
  const dw = originalMapElement.offsetWidth / zoomFactor;
  const dh = originalMapElement.offsetHeight / zoomFactor;
  const centerPoint = lMap.project(center, zoom);
  return L.latLngBounds(
    lMap.unproject(new Point(centerPoint.x - dw, centerPoint.y + dh, false), zoom),
    lMap.unproject(new Point(centerPoint.x + dw, centerPoint.y - dh, false), zoom),
  );
}

有人有解决这个问题的方法吗？或者有人可以解释为什么所有这些都会产生不同的结果，而在我的理解中它们应该返回相同的值？

Answer 1

lMap.unproject()和 lMap.project()不是线性函数。您在以前的方法中将它们视为线性的。const viewHalf = lMap.getSize().divideBy(2);获取显示大小的一半，但不一定匹配投影以提供 map 的中间。
在您的回答中，请调用 lMap.unproject()传递未修改的值，效果很好。
处理非线性关系时，标准算术运算在不包括非线性因素的情况下无法正常工作。