無法在D3/Leaflet應用程序中繪製GeoJSON點

我正在嘗試修改Mike Bostock's D3/Leaflet example來繪製點/路徑。我無法使這個腳本工作。 JSON已驗證 - 請參閱Github。它也無法通過Python local server運行。感謝我在哪裏出錯的任何提示。無法在D3/Leaflet應用程序中繪製GeoJSON點

它也可在Github和在bl.ocks工作。 The JSON file。

<!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>

來源

2013-10-22 geotheory

看起來你已經擊中了一個在d3.geo.bounds()的bug。爲您的數據，它返回

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

而邊界應該是

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

如果要手動指定這些界限，一切工作正常 - http://jsfiddle.net/C7yNh/

我已經打開了這個bug報告這here。

編輯

好吧，我認錯。這實際上是最小邊界框穿過反經絡的正確行爲。在這種情況下，您需要使用path.bounds()獲取邊界框座標，並且返回的點是左上角和右下角，因爲使用傳單進行x/y交換。工作jsfiddle here，感謝Mike Bostock。

來源

2013-10-22 15:32:37

謝謝拉爾斯。任何想法爲什麼符號被削減一半？ – geotheory

邊界框恰好在點所在的位置結束，符號超出該點。只需擴展邊界以使符號顯示完整。 –

當然。隊友的歡呼聲 – geotheory

無法在D3/Leaflet應用程序中繪製GeoJSON點

回答

相關問題