javascript – D3 Leaflet：d3.geo.path()重新采样

我们改编了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 to integers.这意味着初始化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()也是舍入的,所以你可能需要重写它)

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

最佳答案

巧合的是,我最近更新了the tutorial以使用新的d3.geo.transform功能,这使得实现自定义几何变换变得容易.在这种情况下,转换使用Leaflet的内置投影,没有任何D3的高级制图功能,因此禁用adaptive resampling.

新实现如下所示：

var transform = d3.geo.transform({point: projectPoint}),path = d3.geo.path().projection(transform);

function projectPoint(x,y) {
  var point = map.latLngToLayerPoint(new L.LatLng(y,x));
  this.stream.point(point.x,point.y);
}

和以前一样,您可以继续将原始投影函数传递给d3.geo.path,但您将自动获得自适应重采样和反默认切割.因此,要禁用这些功能,您需要定义custom projection,而d3.geo.transform是一种简单的方法,可以为简单的基于点的转换执行此操作.