D3 + Leaflet:d3.geo.path()重新采样

Question

我们改编了Mike Bostock最初的D3 + Leaflet示例:http: //bost.ocks.org/mike/leaflet/, 这样它就不会重新绘制Leaflet中每个缩放的所有路径.

我们的代码在这里:https://github.com/madeincluj/Leaflet.D3/blob/master/js/leaflet.d3.js

具体来说,从地理坐标到像素的投影在这里发生:https: //github.com/madeincluj/Leaflet.D3/blob/master/js/leaflet.d3.js#L30-L35

我们在第一次加载时绘制SVG路径,然后简单地缩放/转换SVG以匹配地图.

这很有效,除了一个问题:D3的路径重新采样,在第一个缩放级别看起来很棒,但是一旦开始放大,看起来会逐渐变得更加破碎.

有没有办法禁用重新采样？

至于为什么我们这样做:我们想要绘制很多形状(数千个)并在每个缩放上重绘它们都是不切实际的.

编辑 经过一些挖掘,似乎重新取样发生在这里:

function d3_geo_pathProjectStream(project) {
   var resample = d3_geo_resample(function(x, y) {
     return project([ x * d3_degrees, y * d3_degrees ]);
   });
  return function(stream) {
    return d3_geo_projectionRadians(resample(stream));
  };
}

有没有办法跳过重采样步骤？

编辑2

真是个红鲱鱼!我们在发送原始函数d3.geo.path().projection和d3.geo.transform对象之间来回切换,但无济于事.

但实际上问题在于传单latLngToLayerPoint,它(显然!)将point.x和point.y舍入为整数.这意味着初始化SVG渲染时缩小的越多,丢失的精度就越高.

解决方案是使用这样的自定义函数:

function latLngToPoint(latlng) {
  return map.project(latlng)._subtract(map.getPixelOrigin());
};

var t = d3.geo.transform({
    point: function(x, y) {
      var point = latLngToPoint(new L.LatLng(y, x));
      return this.stream.point(point.x, point.y);
    }
  });

this.path = d3.geo.path().projection(t);

它与传单本身类似latLngToLayerPoint,但没有四舍五入.(注意,它map.getPixelOrigin()也是四舍五入的,所以你可能需要重写它)

你每天都学到一些东西,不是吗.

Answer 1

巧合的是，我最近更新了教程以使用新的d3.geo.transform功能，这使得实现自定义几何变换变得很容易。在这种情况下，变换使用 Leaflet\xe2\x80\x99s 内置投影，而不使用任何 D3\xe2\x80\x99s 高级制图功能，从而禁用自适应重采样。

\n\n

新的实现如下所示：

\n\n

var transform = d3.geo.transform({point: projectPoint}),\n    path = d3.geo.path().projection(transform);\n\nfunction projectPoint(x, y) {\n  var point = map.latLngToLayerPoint(new L.LatLng(y, x));\n  this.stream.point(point.x, point.y);\n}\n

\n\n

和以前一样，您可以继续将原始投影函数传递给 d3.geo.path，但是您\xe2\x80\x99 将自动获得自适应重采样和反子午线切割。因此，要禁用这些功能，您需要定义一个自定义投影，而 d3.geo.transform 是针对简单的基于点的转换执行此操作的简单方法。

\n