D3.js geoOrthographic()函数

Javascript D3.Js geoOrthographic()函数为我们提供了方位正交投影。当我们想将地球视为 3D 对象及其半球时，它很有用。

句法：

d3.geoOrthographic()

参数：此方法不接受任何参数。

返回值：此方法从给定的 JSON 数据创建并返回 geoOrthographic() 投影。

让我们看一个例子来了解如何使用 geoOrthographic()函数。

示例 1：没有旋转的正交投影

HTML

 
 
    
 
     
     
    
     
    
     
    
 
    
 
     
         
         
     
    
     
        var svg = d3.select("svg"), 
            width = +svg.attr("width"), 
            height = +svg.attr("height"); 
    
        // The orthographic Earth projection 
        // Center(0,0) and no rotation 
        var projection = d3.geoOrthographic()
            .center([0, 0]) 
            .scale(250)
            .clipAngle(90 )
            .translate([width / 2, height / 3]) 
            .rotate([0,0])
  
       // Loading data from json
       d3.json("https://raw.githubusercontent.com/"
           +"epistler999/GeoLocation/master/world.json", 
           function (data) { 
                 
                // Draw the map 
                svg.append("g") 
                    .selectAll("path") 
                    .data(data.features) 
                    .enter().append("path") 
                    .attr("fill", "green") 
                    .attr("d", d3.geoPath() 
                        .projection(projection) 
                    ) 
                    .style("stroke", "#ffff")
            }) 
     

    

输出：

示例 2：具有旋转的正交投影

HTML

 
 
    
 
     
     
     
    
      
 
  
 
     
         
         
     
    
     
        var svg = d3.select("svg"), 
            width = +svg.attr("width"), 
            height = +svg.attr("height"); 
  
        const config = {
            speed: 0.010,
            verticalTilted: -10,
            horizontalTilted: 0
        }
  
        // The orthographic Earth projection 
        // Center(0,0) and no rotation 
        var projection = d3.geoOrthographic()
            .center([0, 0]) 
            .scale(250)
            .clipAngle(90 )
            .translate([width / 2, height / 3]) 
            .rotate([0,0])
      
        const path = d3.geoPath().projection(projection);
  
        // Calling rotate() function for rotation of globe
        Rotate();
  
        // Loading data from json
        d3.json("https://raw.githubusercontent.com/"
            +"epistler999/GeoLocation/master/world.json", 
            function (data) { 
  
                // Draw the map 
                svg.append("g") 
                    .selectAll("path") 
                    .data(data.features) 
                    .enter().append("path") 
                    .attr("fill", "grey") 
                    .attr("d", d3.geoPath() 
                        .projection(projection) 
                    ) 
                    .style("stroke", "#ffff") 
        }) 
  
        // Function to rotate() projection of globe.
        function Rotate() {
            d3.timer(function (elapsed) {
                projection.rotate(
                    [config.speed*elapsed-120, 
                    config.verticalTilted, 
                    config.horizontalTilted]);
                    svg.selectAll("path").attr("d", path);
                });
            }   
     

    

输出：