将svg容器重置为当前视图

Question

我想将SVG覆盖添加到传单地图中。我将一个SVG容器添加到覆盖窗格，我附加了我的SVG。这可行，但我的SVG容器继续滚动地图。要正确显示我的SVG，我希望容器始终跨越我当前的地图视图（从当前地图视图的左上角到右下角）。

如何将svg-container的原点重置到当前地图视图的左上角？

这是我的代码片段，它显示了SVG-overlay的指令。我正在使用leaflet-angular-directive：

dir "C:\specificXFolder" /s /b >> output.txt
RD /S /Q "C:\specificXFolder"

Answer 1

这就是我修复它的方法：

svg容器的大小是所有圆圈的范围。您还必须将圆的半径包括为偏移，因为圆的边界取决于其中心。

/* Update size and scaling of svgs on mapchange */
function update() {
  var bounds = getBounds(features);
  var offset = 20 / 1400 * Math.pow(2, map.getZoom());

  var width = Math.abs((bounds.max[0] - bounds.min[0]) + 2 * radius);
  var height = Math.abs((bounds.max[1] - bounds.min[1]) + 2 * radius);
  var left = bounds.min[0] - radius;
  var top = bounds.min[1] - radius;

  svg.attr('width', width).attr('height', height)
    .style("left", left + 'px')
    .style("top", top + 'px');

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

  g.selectAll('circle')
    .attr("cx", function(d) { return map.latLngToLayerPoint(d.LatLng).x + radius; })
    .attr("cy", function(d) { return map.latLngToLayerPoint(d.LatLng).y + radius;})
    .attr("r", radius);
}

/* Get the min and max bounds of all features */
function getBounds(features) {
  var bounds = { min: [999, 999], max: [-999, -999] };

  _.each(features, function(element) {
    var point = map.latLngToLayerPoint(element.LatLng);

    bounds.min[0] = Math.min(bounds.min[0], point.x);
    bounds.min[1] = Math.min(bounds.min[1], point.y);
    bounds.max[0] = Math.max(bounds.max[0], point.x);
    bounds.max[1] = Math.max(bounds.max[1], point.y);
  });

  return bounds;
}