0

我正在构建一个美国地图，上面有 4000 个数据点，如果可能的话，我想在 d3 中进行。我注意到一次渲染这么多点会使 Chrome 速度变慢，并使 Firefox 停止运行。我想要的是一个 redraw() 函数，它执行以下操作：

topRightCorner = [x1,y1]
bottomLeftCorner = [x2,y2]
data = data.filter(function(d) {
    projectedCoordinates = proj(lat,lon)
    return(projectedCoordinates[0] < x1 
      && projectedCoordintes[0] > x2
      && projectedCoordinates[1] < y1
      && projectedCoordinates[1] > y2}

即只保留投影后的点（在我的情况下为albersUsa）落在可见区域中。但是，我似乎找不到投影的可见尺寸。此功能可用吗？

4

2 回答 2

0

自从我发布以来，我想出了一些可行的方法，并采用了不同的方法。

我在 AlbersUsa() 投影中做所有事情，这对于布局非常有用，因为我需要阿拉斯加和夏威夷，但对于编码来说不太好，因为它没有 invert() 函数。我使用了正常的 Albers().invert() 并且总是在 AK 和 HI 上画点，因为无论如何相对较少。

首先我定义了角落：

    projAlbers.scale(defaultScale * d3.event.scale);
    topLeft = projAlbers.invert([0,0]);
    bottomRight = projAlbers.invert([purewidth,pureheight]);

然后我没有在每次重绘时投影所有坐标，而是将盒子的倒置坐标与真正的纬度/经度进行了比较：

    allCircles.remove();
        visibleDots = data.filter(function(d) {
            return (
                (d.latitude >=49) ||
                (d.longitude < -130) ||
                (d.latitude < topLeft[1] && d.latitude > bottomRight[1] &&
                d.longitude > topLeft[0] && d.longitude < bottomRight[0])); 
        });

这行得通 - 唯一的事情是，当您到达地图弯曲的新英格兰或太平洋西北部时，它不会绘制所有点，因为圆锥投影与我的视窗矩形 1:1 不对应。还在想那个。

（>= 49 和 < -130 总是自然地绘制夏威夷和阿拉斯加）

于 2012-08-09T16:27:24.040 回答
0

一种方法：

首先，您需要定义地图中心的纬度/经度 (centerLatLng)。假设它是 lat=40.0 和 lng=97.0，大致位于美国毗连的中部。

您还想知道可见区域的尺寸（以像素为单位），例如 600x400。

然后你的边界可以计算如下：

var projectedCenter = proj(40, 97);
x1 = projectedCenter[0] - 300;// 300px is half the width of the visible area
x2 = projectedCenter[0] + 300;
y1 = projectedCenter[1] - 200;// 200px is half the height of the visible area
y2 = projectedCenter[1] + 200;

请注意，在此示例中，与您的代码片段不同，[x1, y1]istopLeftCorner和[x2, y2]is bottomRightCorner。而且，过滤条件应该更像：

return
  projectedCoordinates[0] >= x1 &&
  projectedCoordintes[0] < x2 &&
  projectedCoordinates[1] >= y1 &&
  projectedCoordinates[1] < y2;
于 2012-08-08T20:36:16.150 回答