0

我正在努力在传单地图上定位和缩放 voronoi 图。voronoi 多边形在添加到地图后会正确显示，但在调整大小后，它们无法正确缩放和平移。我试图在平移和缩放到特征元素后重置路径。但看起来新值已传递给其父元素。如果我在 feature.selectAll('path).attr('d',path) 上设置路径，则缩放和平移是绝对正确的，但它显示的是 voronoi 意味着而不是 voronoi 多边形。任何想法？

此致，

弗洛

  this.id = p_id;
  this.data = p_data;
  d3.select('#'+this.id).remove();
  var svg = d3.select(map.getPanes().overlayPane).append("svg").attr('id', this.id);

  var g = svg.append("g").attr("class", "leaflet-zoom-hide").attr("id", "cells");
  var pointdata = this.data.features;
  var positions = [];

  pointdata.forEach(function(d){
    positions.push(project(d.geometry.coordinates));
  });

  var polygons = d3.geom.voronoi(positions);
  var bounds = d3.geo.bounds(this.data),
      path = d3.geo.path().projection(project);
  var feature = g.selectAll('g').data(pointdata).enter().append('g');

  feature.append('path')
      .attr('class', 'cell')
      .attr({
          "d":function(d, i) { return "M" + polygons[i].join("L") + "Z"},
          stroke:"#43676b",
          fill: "rgba(255,140,10,0.3)"
      });

  map.on("viewreset", reset);
  reset();
  function reset() {
    scale = Math.pow(2, map.getZoom() - map.options.zoom);
    var padding = 25;
    var bottomLeft = project(bounds[0]),
        topRight = project(bounds[1]);

    bottomLeft = [bottomLeft[0]-padding, bottomLeft[1]+padding]
    topRight = [topRight[0]+padding, topRight[1]-padding]

    console.log(polygons); 

    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] + ")");
    feature.attr('d', path);
  }

  function project(x) {
      var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
      return [point.x, point.y];
  }
4

0 回答 0