大佬教程收集整理的这篇文章主要介绍了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()也是舍入的,所以你可能需要重写它)
你每天都学到一些东西,不是吗.
新实现如下所示：
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是一种简单的方法,可以为简单的基于点的转换执行此操作.
以上是大佬教程为你收集整理的javascript – D3 Leaflet：d3.geo.path()重新采样全部内容，希望文章能够帮你解决javascript – D3 Leaflet：d3.geo.path()重新采样所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。