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 回答