我们改编了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()也是舍入的,所以你可能需要重写它)
你每天都学到一些东西,不是吗.
新实现如下所示：
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是一种简单的方法,可以为简单的基于点的转换执行此操作.
