0

我需要从 FeatureCollection geojson 文件中绘制许多多边形。当我使用 D3.js 和 Leaflet 这样做时，我的路径元素被绘制在远离地图的地方。我的 svg 元素的高度为零。为什么我的代码会给我这个结果？

我认为 path.bounds() 能够处理我的 FeatureCollection，但我认为这是我的 svg 元素以零高度绘制的原因。当我在 DOM 中看到我的路径元素时，我很难理解为什么我的路径元素被绘制得离地图如此之远。 

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

...

var transform = d3.geo.transform({point: projectPoint}),
path = d3.geo.path().projection(transform)

// create path elements for each of the features
var d3_features = g.selectAll("path").data(geoShape.features)
            .enter().append("path");


map.on("viewreset", reset);

reset();

// fit the SVG element to leaflet's map layer
function reset() {

var bounds = path.bounds(geoShape);

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] + ")");

// initialize the path data
     d3_features
        .attr("d", path)
        .attr('fill','blue')
        .attr("stroke", "black")
        .style("fill-opacity", 0.7);
}

        // 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);
 }
})

路径元素应该在 Tucson 上绘制许多重叠的矩形多边形。我在这里重现了我的问题：http: //bl.ocks.org/Alex-Devoid/97a003bf42cfc9a7e922b650c42d264c

4

0 回答 0