D3:如何“旋转”背景纹理和投影

D3: How to 'rotate' background texture along with the projection

提问人:Jagan Veeraraghavan 提问时间:11/15/2023 最后编辑:Jagan Veeraraghavan 更新时间:11/15/2023 访问量:30

问:

我正在用带有图像纹理的 D3 构建一个旋转的地球仪。我已经建造了地球仪并使用

    this.projection = d3.geoOrthographic()
                        .fitExtent([[this.inset, this.inset], 
                                   [this.width - this.inset, this.height - this.inset]], 
                                   this.outline);
    this.path = d3.geoPath(this.projection, this.context);
    this.projection.rotate([this.options.speed * performance.now(), -15]);
    while(true){
        this.context.save();
        this.context.beginPath();
        this.projection.precision(0);
        this.path(this.land_geo);
        this.context.fillStyle = this.landTexture;
        this.context.fillStyle="DarkSeaGreen";
        this.context.fill();
        this.context.restore();
}

虽然显示纹理并且地球旋转,但它看起来更像是纹理是静态背景,而地球就像一面镜子。如何使纹理随地球仪一起移动?

Spinning Globe

JavaScript D3.js HTML5-canvas, d3-geo

评论


答: 暂无答案