3

ポイント/パスをプロットするために、 Mike Bostock の D3/Leaflet の例を適応させようとしています。このスクリプトを機能させることができません。JSON が検証されます - Github を参照してください。また、 Python ローカル サーバー経由での実行にも失敗します。私が間違っている場所のヒントに感謝します。

Githubでも表示でき、 bl.ocksで動作します。 JSON ファイル。

<!DOCTYPE html>
<html>
<head>
<title>Calibration-check points using Leaflet and D3</title>

<!-- Points are London O2 Arena, Washington Monument, Cape Town Stadium and the Sydney Opera House -->

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->

<style>

#mapA 
{
border:2px solid;
border-radius:0;
 height: 99.5%; 
} 
html, body { height: 100%; width: 100%; margin: 0; }
</style>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>

</head>
    <body>
        <p id="mapA" height: 100%></p>

        <script>

// Function to check JSON is valid
geogjnfile = 'reference_points.geojson';
function validateJSON()
{
$.ajax({
    url: 'http://geojsonlint.com/validate',
    type: 'POST',
    data: geogjnfile,
    dataType: 'json',
    success: processSuccess,
    error: processError
});
}
function processSuccess() {console.log("JSON OK");}
function processError()   {console.log("JSON Invalid");}
validateJSON();


    var markersOnMap = [];

    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png',
    cloudmadeAttribution = ' 2013 CloudMade';

var minimal   = L.tileLayer(cloudmadeUrl, {styleId: 22677, attribution: cloudmadeAttribution}),
    midnight  = L.tileLayer(cloudmadeUrl, {styleId: 999,   attribution: cloudmadeAttribution});

var map = L.map('mapA', {
    center: new L.LatLng(20, 0),
    zoom: 2,
    layers: [minimal]
});

    var svg = d3.select(map.getPanes().overlayPane).append("svg"),
        g = svg.append("g").attr("class", "leaflet-zoom-hide");

    d3.json("https://dl.dropboxusercontent.com/u/46043231/data/reference_points.geojson", function(collection) {

        function project(x) {
          var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
          return [point.x, point.y];
        }

        var path = d3.geo.path().projection(project);

        var feature = g.selectAll("path")
          .data(collection.features)
          .enter().append("path");

        feature.attr("d", path);

        var bounds = d3.geo.bounds(collection),
            bottomLeft = project(bounds[0]),
            topRight = project(bounds[1]);

        svg .attr("width", topRight[0] - bottomLeft[0])
            .attr("height", bottomLeft[1] - topRight[1])
            .style("margin-left", bottomLeft[0] + "px")
            .style("margin-top", topRight[1] + "px");

        g   .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");

    });


var baseMaps = {
    "Minimal": minimal,
    "Night View": midnight
};

        </script>

    </body>
</html>
4

1 に答える 1

4

でバグに遭遇したようですd3.geo.bounds()。あなたのデータの場合、それは返します

[[151.21495788612214, -33.90365832941416],
 [18.41118908051975, 51.50298551279427]]

一方、境界は

[[-77.035237489892879, -33.903658329414156],
 [151.21495788612214, 51.502985512794268]]

これらの境界を手動で指定すると、すべて正常に動作します -- http://jsfiddle.net/C7yNh/

これに関するバグレポートをこちらで開いています。

編集

さて、私は訂正しました。最小境界ボックスが子午線と交差するため、これは実際には正しい動作です。この場合、次を使用してバウンディング ボックスの座標を取得する必要がありますpath.bounds()。リーフレットとの x/y スワップのため、返されるポイントは左上と右下になります。Mike Bostock のおかげで、ここでjsfiddleが動作しています。

于 2013-10-22T15:32:37.550 に答える