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

Question

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

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

这在我放大和缩小时效果很好:

但是当我平移时,SVG覆盖也会移动,并且由于其大小是固定的,因此形状会被截断:

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

Answer 1

在这个例子中,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
});

这是一个工作示例(在Firefox和Chrome中测试过).

一些警告:

1. 您希望人们放大的距离越远,您需要渲染的初始"临时"地图越大.例如,如果要允许缩放级别7,则可能需要使初始地图2000 x 2000进行补偿.显然,渲染地图时存在性能问题.正如分散指出的那样,限制缩放级别可能是明智之举.
2. 由于最后一分钟的重新调整大小,地图重新调整时会出现闪烁.您可能想要考虑使用jQuery隐藏/显示地图,或者可能在所有内容上放置一个白色叠加层,直到地图完成重新调整大小.