在谷歌地图上覆盖d3路径？

Question

我正在尝试使用d3.geo和GeoJson将地图叠加到Google Maps上。我已经设法强制d3使用Google Map的投影来绘制路径，这非常简单。这是我到目前为止所知道的：

http://www.caudillweb.com/temp/d3_choropleth.html

当我放大和缩小时，效果很好：

​

​

但是当我平移时，SVG覆盖也会移动，因为它的大小是固定的，所以形状会被截断：

​

​

有没有人用过这样的东西？有什么想法可以让我从这里开始吗？上面的例子是一个独立的HTML文件，如果有人想要使用它的话。

Answer 1

在this example中，svg的宽度和高度被设置为8000x8000，这似乎可以达到大约9-10的缩放级别。顶部和左侧设置为-4000 x -4000以居中。最后，对投影进行移位/偏移，使其绘制在svg的中心：

放大并居中svg:

.SvgOverlay svg {
    position: absolute;
    top: -4000px;
    left: -4000px;
    width: 8000px;
    height: 8000px;        
}

偏移投影：

return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];

Answer 2

一种选择是将初始贴图大小设置为非常大的值，例如，1000 x 1000像素或更大。这将强制SVG覆盖在可见区域内呈现(这似乎是Firefox的限制)。我意识到这可能会破坏您站点的设计，所以您可能想要考虑用div包装地图以隐藏溢出。

#map-wrap {
    width: 500px;
    height: 500px;
    overflow: hidden;
}

#map {
    width: 1000px; /* just big enough to show the whole thing at zoom #6 */
    height: 1000px;
}

渲染贴图后，可以将贴图大小调整为所需的500 x 500大小并重新居中。这可以在bounds_changed事件中完成：

google.maps.event.addListener(map, 'bounds_changed', function() {
    $map.css({ height: '500px', width: '500px' }); // back to desired dims
    google.maps.event.trigger(map, 'resize'); // trigger a 'refresh'
    map.setCenter(new google.maps.LatLng(-18.2, 35.1)); // re-center map
    google.maps.event.clearListeners(map, 'bounds_changed'); // don't do this again
});

Here is a working example (在火狐和Chrome上测试)。

一些注意事项：

1. 你想让人们放大得越远，你需要渲染的初始“临时”地图就越大。例如，如果您希望缩放级别为7，则可能需要将初始地图设置为2000 x 2000以进行补偿。显然，在渲染这么大的地图时会有性能方面的问题。正如disperse指出的那样，限制缩放级别可能是明智的。
2. 由于最后一分钟调整大小，在地图重新调整时会有闪烁。您可能需要考虑使用jQuery隐藏/显示地图，或者在所有内容上放置白色叠加，直到地图完成大小调整。

Answer 3

我可以通过将svg变大，添加一些填充，并给出一个负的顶部和左侧位置来解决这个问题，如下所示：

    .SvgOverlay, .SvgOverlay svg {
        position: absolute;
        top: -250px;
        left: -250px;
        padding: 500px;            
    }

    var svg = layer.append("svg")
          .attr("width", 1000)
          .attr("height", 1000)

如果你想允许你的用户进一步放大，你必须增加所有这些数字。例如，将它们增加10倍，似乎可以解决所有缩放级别的问题。但是，您可能希望限制用户的缩放能力，因为随着您进一步放大，svg覆盖的有用性会降低。

这里有一个小提琴演示了这个想法。http://jsfiddle.net/VHWqq/7/

编辑:正如Herb指出的那样，这种方法在Firefox上不起作用。