D3 + 传单:d3.geo.path(） 重新采样

D3 + Leaflet: d3.geo.path() resampling

本文关键字：采样 新采样 path 传单 d3 geo D3      更新时间：2023-09-26

我们改编了Mike Bostock的原始D3 +传单示例：http://bost.ocks.org/mike/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()也是四舍五入的，所以可能需要重写它）

你每天都能学到一些东西，不是吗。

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

新的实现如下所示：

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，但您将自动获得自适应重采样和反计时剪切。因此，要禁用这些功能，您需要定义自定义投影，而 d3.geo.transform 对于简单的基于点的变换来说是一种简单的方法。

相关文章：