d3.js - D3 Choropleth - 确定纬度/经度点当前是否在地图视图中

Question

所以我有一个带有许多基于纬度/经度的标记的等值线。根据当前的地图视图/缩放，我希望能够知道当前视图中有哪些标记。我有点工作，但是，当点有点靠近地图边缘时它不准确，我不知道为什么。

带有工作示例的 JSFiddle：https ://jsfiddle.net/e39fgnjL/7/

所以你可以看到有 4 个点，但是在用我的数据点过滤后，我只看到 1 个。

再次，一旦我的分数接近边缘，它就会停止工作。

这就是我用来生成地图视图的纬度/经度边界的方法。

function getScreenBounds() {
  return [getPoint(0,0), getPoint()];
}

function getPoint(x,y) {
  if (x == null) x = width;
  if (y == null) y = height;
  var container = svg.node();
  var pointContainer = container.ownerSVGElement || container;
  var point = pointContainer.createSVGPoint();
  point.x = x, point.y = y;
  point = point.matrixTransform(container.getScreenCTM().inverse());
  return projection.invert([point.x, point.y]);
}

任何人都可以帮助我指出正确的方向，为什么这不起作用？

标签： d3.jschoroplethmap-projections

Answer 1

我很确定这不是您期望的，因为纬度和经度投影到您的矩形上。

由于投影问题，您的矩形边缘不与南北东西线对齐（查看北部边界......在纬度/经度方面，这是一条固定纬度的东西直线，但在你的地图肯定会在边缘卷曲）

这意味着计算 lat/long 框中的点与计算投影到矩形中的点不同。

一个简单的解决方法是检查每个点以查看该点的投影是否在矩形的边界内。