google-maps – 将d3路径重叠到Google地图上?

我试图使用d3.geo和GeoJson将地图叠加到Google地图上。我已经设法强制d3使用谷歌地图的投影绘制路径,这是令人惊讶的容易。这里是我到目前为止:

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

这个工作很好,因为我放大和缩小:

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

有没有人得到这样的东西工作?任何想法,我可以从这里去?上面的例子是一个单独的自包含的HTML文件,如果任何人想玩它。

this example中,svg的宽度和高度被设置为8000×8000,直到大约缩放级别9-10,这似乎是OK的。顶部和左侧设置为-4000 x -4000以使其居中。最后,投影被移位/偏移,使得它绘制在svg的中心:

放大并居中svg:

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

偏移投影:

return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
http://stackoverflow.com/questions/11909099/overlay-d3-paths-onto-google-maps

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:google-maps – 将d3路径重叠到Google地图上?