35

d3.geoとGeoJsonを使用して地図をGoogleマップにオーバーレイしようとしています。私はなんとかd3にパスを描くためにGoogleマップの投影を使用するように強制することができました。これは驚くほど簡単でした。これが私がこれまでに持っているものです：

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

これは、ズームインおよびズームアウトするときにうまく機能します。

地図をズームアウト 地図を拡大

しかし、パンすると、SVGオーバーレイも移動し、サイズが固定されているため、形状が切り捨てられます。

パンダウンされたマップ

誰かがこのようなものを機能させることができましたか？ここからどこへ行けるか考えてみませんか？上記の例は、誰かがそれを試してみたい場合の単一の自己完結型HTMLファイルです。

4

3 に答える 3

27

この例では、svgの幅と高さは8000 x 8000に設定されています。これは、ズームレベル9〜10までは問題ないようです。上部と左側は、中央に配置するために-4000x-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

1つのオプションは、初期マップサイズを非常に大きいもの、たとえば1000x1000ピクセル以上に設定することです。これにより、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を許可する場合は、補正するために初期マップを2000x2000にする必要があります。明らかに、マップをそれほど大きくレンダリングする場合、パフォーマンスの問題があります。分散が指摘したように、ズームレベルを制限するのが賢明かもしれません。
  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/

編集：ハーブが指摘しているように、このアプローチはFirefoxでは機能しません。

于 2012-08-17T18:18:54.813 に答える