35

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

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

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

地图缩小 地图放大

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

地图向下平移

有没有人得到这样的工作？有什么想法我可以从这里去吗？上面的例子是一个独立的 HTML 文件，如果有人想玩的话。

4

3 回答 3

27

在此示例中，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];
于 2012-08-19T16:02:42.847 回答
5

一种选择是将初始地图大小设置为非常大的值，例如 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 隐藏/显示地图，或者可能在所有内容之上放置一个白色覆盖层，直到地图完成重新调整大小。
于 2012-08-18T04:25:35.140 回答
2

我能够通过使 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。

于 2012-08-17T18:18:54.813 回答