D3 GEO应用专题(一):绘制旋转的3D地球

首先查看效果，见下图：

绘制3D地球的步骤如下：
1. 创建投影，并确定初始旋转角度；
2. 创建地球方格生成器;
3. 创建路径生成器path;
4. 渲染地球方格；
5. 渲染初始角度的地图；
6. 创建定时动画，更新投影的旋转角度；
7. 重绘地图；

相关初始化代码如下所示：

//   创建投影
var projection = d3.geoOrthographic()
                   .center([0, 0])
                   .translate([cx, cy])
                   .scale(width / Math.PI)
                   .rotate([0, 0, 0]),
    //  创建地球方格生成器
    gridGenerator = d3.geoGraticule()               
    //  创建路径生成器path
    path = d3.geoPath().projection(projection)

渲染的相关代码如下：

//  渲染方格
svg.append('g')
   .attr('class', 'grid')
   .append('path')
   .datum(gridGenerator)
   .attr('class', 'graticule')
   .attr('d', path)
   .attr('stroke-width', '1px')
   .attr('stroke', '#EEE')
//  获取GeoJSON数据
d3.json('worlds.json', datas => {
    let features = datas.features
    // 渲染地图
    svg.append('g')
       .attr('class', 'map')
       .selectAll('.country')
       .data(features)
       .enter()
       .append('path')
       .attr('class', 'country')
       .attr('d', path)
    }
)

更新动画的代码如下

var timerId;
//  重绘函数
function redraw() {
    //  旋转地图角度
    let proj = projection.rotate([step * i, 0, 0]),
        path = d3.geoPath().projection(projection)
    //  这里只需要更新
    svg.select('g.map')
       .selectAll('.country')
       .data(features)
       .attr('d', path)           
    i ++
    //  准备执行下次动画
    timerId = requestAnimationFrame(redraw)
}
requestAnimationFrame(redraw)

结论

理解各种投影运算的差异是绘制地球的基础。