d3.js geoOrthographic()用法及代码示例

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

用法:

d3.geoOrthographic()

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

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

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

示例 1：无旋转的正交投影

HTML


<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, 
                initial-scale=1.0" /> 
    
    <script src="https://d3js.org/d3.v4.js"></script> 
    
    <script src= 
"https://d3js.org/d3-geo-projection.v2.min.js"> 
    </script>
</head> 
    
<body> 
    <div> 
        <svg width="1200" height="850"> 
        </svg> 
    </div> 
    
    <script> 
        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")
            }) 
    </script> 
</body>
    
</html>

输出：

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

HTML


<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content=
        "width=device-width,initial-scale=1.0" /> 
    <script src="https://d3js.org/d3.v4.js"></script> 
    <script src=
"https://d3js.org/d3-geo-projection.v2.min.js">
    </script>  
</head> 
  
<body> 
    <div> 
        <svg width="1200" height="850"> 
        </svg> 
    </div> 
    
    <script> 
        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);
                });
            }   
    </script> 
</body>
    
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自faizamu19大神的英文原创作品 D3.js geoOrthographic() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。