无法在D3/Leaflet应用程序中绘制GeoJSON点

Question

无法在D3/Leaflet应用程序中绘制GeoJSON点

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>

- geotheory

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lars Kotthoff · Accepted Answer

看起来您在d3.geo.bounds()中遇到了一个bug。对于您的数据，它返回

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

边界应该是什么

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

如果您手动指定这些边界，一切都很顺利-- http://jsfiddle.net/C7yNh/ 我在这里开了一个错误报告here. 编辑好吧，我错了。实际上，这是正确的行为，因为最小边界框穿过了反子午线。在这种情况下，您需要使用path.bounds()获取边界框坐标，并且由于与leaflet交换了x/y，返回的点是左上和右下。感谢Mike Bostock的工作jsfiddle here。