gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-11-01 04:18:00 26 4
gpt4 key购买 nike

我们改编了 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 以匹配 map 。

这非常有效,除了一个问题: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 对象发送原始函数之间来回切换,但无济于事。

但实际上问题出在 leaflet 的 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);

它类似于 leaflet 自己的 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 是一种简单的基于点的转换的简单方法。

关于javascript - D3 + Leaflet : d3. geo.path() 重采样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19660153/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com