将d3路径叠加到Google地图上？ [英] Overlay d3 paths onto Google Maps?

问题描述

我尝试使用d3.geo和GeoJson将地图叠加到Google地图上。我已经设法强制d3使用谷歌地图的投影绘制路径，这是非常容易。这是我到目前为止：

将svg的宽度和高度设置为8000 x 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]; 
  

I'm trying to overlay a map onto Google Maps using d3.geo and GeoJson. I've managed to force d3 to use the Google Map's projection for drawing the paths, which was surprisingly easy. Here's what I have so far:

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

This works well as I zoom in and out:

But when I pan, the SVG overlay moves too, and since its size is fixed, the shapes get truncated:

Has anyone gotten something like this to work? Any ideas where I could go from here? The above example is a single self-contained HTML file if anyone wants to play with it.

解决方案

In this example the width and height of the svg are set to 8000 x 8000, which seemed to be OK up to about zoom level 9-10. The top and left are set to -4000 x -4000 to center it. Finally, the projection is shifted/offset so that it draws in the center of the svg:

Enlarge and center the svg:

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

Offset the projection:

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

这篇关于将d3路径叠加到Google地图上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！