将 svg 容器重置为当前视图答案

【问题标题】：Reset svg container to current view将 svg 容器重置为当前视图
【发布时间】：2015-06-16 14:28:10
【问题描述】：

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

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

这是我的代码 sn-p，它显示了 SVG 覆盖的指令。我正在使用传单角度指令：

angular.module('app')
  .directive('cluster', ['lodash', function() {
    return {
      link: function(scope, element, attrs, leafletController) {

        scope.$watch('cluster', function(newCluster, oldCluster) {
          leafletController.getMap()
            .then(function(map) {
              return scope.render(newCluster, map);
            });
        });

        scope.render = function(cluster, map) {
          var overlayPane = d3.select(map.getPanes().overlayPane);

          var svg = overlayPane.append("svg").attr("class", "leaflet-zoom-hide cluster");
          var g = svg.append("g");

          // append features (circles) to g
          // ...

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

          function update() {
            // update svg
            svg.attr("width", map.getSize().x);
            svg.attr("height", map.getSize().y);

            // update features
            // ...
          }
        };
      }
    };
  }]);

【问题讨论】：

标签： javascript d3.js leaflet angular-leaflet-directive

【解决方案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;
}

【讨论】：