Javascript D3中带投影的动态简化
我使用Javascript D3中带投影的动态简化,javascript,d3.js,topojson,Javascript,D3.js,Topojson,我使用D3.geo.mercator()投影绘制了一幅带有D3的SVG地图 我还对贴图使用缩放行为,该行为将变换应用于包含贴图所有路径的对象 在看了Mike Bostock()的动态简化示例后,我想知道在我的例子中是否可以应用这样的算法来在缩小几何体时用更少的点重新绘制几何体 在我看到的所有示例中,都有一个simplify函数,它跳过可忽略的点并按原样绘制其余点,该函数用于var path=d3.geo.path().projection(simplify)。我不能那样使用它,因为我需要将它应用
D3.geo.mercator()
投影绘制了一幅带有D3的SVG地图
我还对贴图使用缩放行为,该行为将变换应用于包含贴图所有路径的
对象
在看了Mike Bostock()的动态简化示例后,我想知道在我的例子中是否可以应用这样的算法来在缩小几何体时用更少的点重新绘制几何体
在我看到的所有示例中,都有一个simplify
函数,它跳过可忽略的点并按原样绘制其余点,该函数用于var path=d3.geo.path().projection(simplify)
。我不能那样使用它,因为我需要将它应用于已有的projection=d3.geo.mercator().scale(*).translate([*,*])
之上
如何对现有投影使用动态简化?根据您引用的示例
simplify
函数类似于
var simplify = d3.geo.transform({
point: function(x, y, z) {
if (z >= area) {
this.stream.point(x, y);
}
}
});
其中,area
是一个treshold变量,您可以预先设置或根据缩放进行动态修改
然后,您可以在d3.geo.path()
的projection
方法中使用它
var path = d3.geo.path()
.projection(simplify);
这或多或少就是你在回答中描述的情况。现在,根据,投影法也可以定义为
var path = d3.geo.path()
.projection({
stream: function(s) {
return simplify.stream(s);
}
});
这和以前完全一样。它只是“扩展”默认方法d3.geo.path
始终调用投影stream
方法,因此您可以声明自己的流并将其转发到simplify.stream
现在,您说需要使用d3.geo.mercator()重新投影路径
没问题:流是可链接的。你可以做:
var path = d3.geo.path()
.projection({
stream: function(s) {
return simplify.stream(mercatorProjection.stream(s));
}
});
以及:
var path = d3.geo.path()
.projection({
stream: function(s) {
return mercatorProjection.stream(simplify.stream(s));
}
});
唯一的区别是,如果要处理WGS84、像素或其他坐标系,则必须以不同的方式计算treshold面积
重要注意事项,simplify
功能中的z
参数不是高度。这是一个预先计算的值,它是甜度的一部分
恐怕这意味着你不能依靠这个例子来简化常规的geoJSON。您必须添加自己的逻辑来计算每个点的相关面积(如果要应用)或到最近点的距离(如果要应用算法)或实现自己的算法
祝你好运
var path = d3.geo.path()
.projection({
stream: function(s) {
return mercatorProjection.stream(simplify.stream(s));
}
});