Question

我需要从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);
 }
})

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

使用D3.js和Leaflet绘制许多多边形时，未在地图上绘制路径元素

0 个答案: