将d3路径叠加到Google地图上？

Question

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

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

放大和缩小时效果很好：

但是当我平移时，SVG叠加也会移动，并且由于它的大小是固定的，因此形状会被截断：

有没有人得到这样的工作？我可以从这里出发的任何想法？上面的例子是一个单独的HTML文件，如果有人想玩它。

Answer 1

在this example中，svg的宽度和高度设置为8000 x 8000，这似乎可以达到约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（在Firefox和Chrome中测试过）。

一些警告：

1. 您想让人们放大的距离越远，您需要渲染的初始“临时”地图越大。例如，如果要允许缩放级别7，则可能需要使初始地图2000 x 2000进行补偿。显然，渲染地图时存在性能问题。正如分散指出的那样，限制缩放级别可能是明智之举。
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。