D3中具有投影的动态简化

巴托·纳兹

我正在使用d3.geo.mercator()投影绘制带有D3的SVG地图

我还对地图使用了缩放行为,该行为将a应用于持有地图所有路径transform<g>对象。

看完Mike Bostock(http://bl.ocks.org/mbostock/6252418进行的动态简化示例之后,我想知道是否可以在我的情况下应用这样的算法来在缩小几何图形时以更少的点重绘它?

在我看到的所有示例中,都有一个simplify函数可以忽略可忽略的点并按原样绘制其余部分,并且该函数在中使用var path = d3.geo.path().projection(simplify)我不能那样使用它,因为我需要在已经存在的基础上应用它projection = d3.geo.mercator().scale(*).translate([*,*])

如何在现有投影中使用动态简化?

ffflabs

根据您引用的示例,“动态简化II”

simplify功能将类似于

var simplify = d3.geo.transform({
  point: function(x, y, z) {
    if (z >= area) {
        this.stream.point(x, y);
    }
  }
});

area阈值变量在哪里,您可以预先设置或根据缩放进行动态修改。

那么你可以使用它的projection方法d3.geo.path()类似

var path = d3.geo.path()
    .projection(simplify);

这或多或少是您在答案中描述的情况。现在,根据动态简化IV,投影方法也可以定义为

var path = d3.geo.path()
    .projection({
        stream: function(s) { 
            return simplify.stream(s); 
        }
     });

这和以前完全一样。只是“扩展”了默认方法。d3.geo.path总是调用projectionstream方法,因此您可以声明自己的流并将其转发给simplify.stream

现在,您说您需要使用d3.geo.mercator()重新投影路径。

var mercatorProjection = d3.geo.mercator().scale(*).translate([*,*]);

没问题:流是可链接的你可以做:

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,像素或其他坐标系,则必须不同地计算阈值区域。

重要说明函数中z参数simplify不是海拔高度。它是每个点定义的三角形面积,它是TopoJSON甜度的一部分,是预先计算的值。

恐怕这意味着您不能依靠此示例来简化常规的geoJSON。您必须添加自己的逻辑来计算每个点的相关区域(如果要应用Visvalingam的算法)或到最近点的距离(如果要应用Douglas-Peucker算法)或实现自己的算法。

祝好运。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在 Openlayers 4 中设置 D3 投影

来自分类Dev

D3强制-为具有动态refX的链接创建标记以反映变化的节点大小

来自分类Dev

在D3中动态创建图例

来自分类Dev

如何在d3中使用带有多多边形的投影来获得屏幕坐标

来自分类Dev

检查d在D3中的函数(d){...}中是否具有变量

来自分类Dev

检查路径是否在带有d3的svg中具有标题

来自分类Dev

如何找到现有D3路径的投影

来自分类Dev

d3中具有顺序x轴的水平平移

来自分类Dev

如何在D3中可视化具有不同输入文件的多个图形?

来自分类Dev

在D3中使线条补丁具有不同的颜色

来自分类Dev

d3中具有不同翻转动作的多个多边形

来自分类Dev

在D3中具有Contenteditable的ForeignObject无法与Chrome一起使用

来自分类Dev

d3中具有不同组的分组类别条形图?

来自分类Dev

动态过滤D3有向图的节点

来自分类Dev

D3动态过滤

来自分类Dev

D3中的折线图动态数据更新

来自分类Dev

D3中的工具提示如何动态获取数据?

来自分类Dev

在D3中生成动态数据的工具提示

来自分类Dev

力布局中的d3动态曲线

来自分类Dev

D3中的折线图动态数据更新

来自分类Dev

d3中动态矩形和圆形之间的区别?

来自分类Dev

Python是否具有D3之类的Scale函数?

来自分类Dev

具有大数据的D3性能(需要反馈)

来自分类Dev

d3获取具有特殊字符的属性

来自分类Dev

D3行.defined()具有不同的数组

来自分类Dev

具有多个事件处理程序的多个元素传递参数;d3.js; 简化代码

来自分类Dev

简化与D3一起使用的KML

来自分类Dev

D3绘制零投影的经度/纬度

来自分类Dev

如何使用正投影D3从CSV旋转点