Question

我正在努力在地图上绘制Geojson数据。我有一个包含“example”

等数据的列

   var example= {"type":"FeatureCollection","features":[
      {"type":"MultiPolygon","coordinates":[[[[-74.0758273156424,40.5922324042084],[-74.0761549604646,40.5921150798826],[-74.076200629116,40.5921869978165],[-74.0760676410383,40.5922346191496],[-74.0758729840191,40.5923043204707],[-74.0758273156424,40.5922324042084]]]]}
     ]}

我正在关注Mike Bostock的帖子：http://bost.ocks.org/mike/leaflet/ 当我从CSV文件中的列中获取数据时，我将使用d3.csv（..）在这个例子中，我将使用类似于我所获得的数据的变量来简化问题。

<script>

var map = new L.Map("map", {center: [40.783435, -73.966249], zoom: 4})
    .addLayer(new L.TileLayer("http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/998/256/{z}/{x}/{y}.png"));

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

  var example= {"type":"FeatureCollection","features":[
          {"type":"MultiPolygon","coordinates":[[[[-74.0758273156424,40.5922324042084],[-74.0761549604646,40.5921150798826],[-74.076200629116,40.5921869978165],[-74.0760676410383,40.5922346191496],[-74.0758729840191,40.5923043204707],[-74.0758273156424,40.5922324042084]]]]}
         ]}

//var link ="data.csv";
d3.csv(link, function(data) {

 // Getting Data
 //...

 //we will use 
  var transform = d3.geo.transform({point: projectPoint}),
      path = d3.geo.path().projection(transform),
      bounds = path.bounds(exemple);

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

  map.on("viewreset", reset);
  reset();

  // Reposition the SVG to cover the features.
  function reset() {
    var topLeft = bounds[0],
        bottomRight = bounds[1];

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

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

    feature.attr("d", path);
  }

  // Use Leaflet to implement a D3 geometric transformation.
  function projectPoint(x, y) {
    var point = map.latLngToLayerPoint(new L.LatLng(y, x));
    this.stream.point(point.x, point.y);
  }


});

</script>

但我在地图上没有得到任何结果

错误讯息：错误：属性width =“ - Infinity”的值无效错误：属性height =“ - Infinity”

的值无效

我尝试了另一个例子，但它不起作用。 http://jsfiddle.net/C7yNh/8/

使用D3./Leaflet在地图上绘制地理数据

0 个答案: