如何計算d3.js衛星投影的投影旋轉和刻度延伸

我很難計算衛星投影演示的正確參數。事實上，我試圖讓地理位置的衛星投影34.0000°N，9.0000°E。所以，對於d3.geo.satellite（）的旋轉參數是：如何計算d3.js衛星投影的投影旋轉和刻度延伸

rotate([10, 34, ?])

但我不知道如何定義卷。另外，你能否解釋一下如何定義格線參數。

這裏就是我所做的到現在，但該圖沒有顯示：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.graticule { 
    fill: none; 
    stroke: #777; 
} 

.boundary { 
    fill: #ccc; 
    fill-opacity: .8; 
    stroke: #000; 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> 
<script src="http://d3js.org/topojson.v1.min.js"></script> 
<script> 
//satellite projection of tunisia 
// 


var width = 1200, 
    height = 960; 

//what is a projection is general ? 
var projection = d3.geo.satellite() 
    .distance(1.1) 
    .scale(2500) 
    // what does rotate do? 
    //If rotation is specified, sets the projection’s three-axis rotation to the specified longitude, latitude and roll in degrees and returns the projection 
    .rotate([50, -20, 20])//rotate([36, 10, 32]) //([76.00, -34.50, 32.12]) 
    //center: changes the center of the overall globe 
    .center([-3, 6]) 
    //what tilt does? after few tests, I still don't know ... 
    .tilt(28) 
    .clipAngle(Math.acos(1/1.1) * 180/Math.PI - 1e-6) //doesn't change 
    .precision(.1); 


//what is a graticule? 
//  a network of lines representing meridians and parallels, on which a map or plan can be represented. 
var graticule = d3.geo.graticule() 
    // how to compute the major and minor extent for graticule ? 
    .extent([[-60, 15], [-50 + 1e-6, 200 + 1e-6]]) 
    //step will define the dimensions of the rectangles within the map graticule 
    .step([2, 2]); 

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

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

svg.append("path") 
    .datum(graticule) 
    .attr("class", "graticule") 
    .attr("d", path); 

d3.json("data/tunisia.json", function(error, topology) { 
    console.log(topology); 


    svg.append("path") 
     .datum(topojson.feature(topology, topology.objects.governorates)) 
     .attr("class", "boundary") 
     .attr("d", path); 
}); 

d3.select(self.frameElement).style("height", height + "px"); 

</script>

來源

2014-09-28 MedAli

是的，你這樣做是正確的 - 唯一的事情是，你必須讓數字負因爲方向的輪換。

所以rotate([-10, -34, 0])會讓你大部分的方式。使用它時，滾動參數非常明顯 - 它只是將垂直指向的軸上的當前位置的視點旋轉到一個方向或另一個方向。

另請注意，沒有指定範圍的刻度線覆蓋地球。但是，您可以僅使用擴展區在感興趣的地理區域周圍繪製一層格線。同樣，我建議通過改變數值並觀察d3如何反應來嘗試！

以下示例（從您的要點借用JSON）。如果你想試驗這些值，我也推薦使用Plunker這樣的東西，每次你改變一個值時都會重新繪製投影。我用rotate([-15, -31, -20])添加不同的觀點：

var width = 800, 
 
    height = 600; 
 

 
//what is a projection is general ? 
 
var projection = d3.geo.satellite() 
 
    .distance(1.1) 
 
    .scale(5500) 
 
    // what does rotate do? 
 
    //If rotation is specified, sets the projection’s three-axis rotation to the specified longitude, latitude and roll in degrees and returns the projection 
 
    .rotate([-15, -31, -20]) 
 
    //.rotate([36, 10, 32]) 
 
    //.rotate([76.00, -34.50, 32.12]) 
 
    //center: changes the center of the overall globe 
 
    .center([-1, 5]) 
 
    //what tilt does? after few tests, I still don't know ... 
 
    .tilt(10) 
 
    .clipAngle(Math.acos(1/1.1) * 180/Math.PI - 1e-6) //doesn't change 
 
    .precision(.1); 
 

 

 
//what is a graticule? 
 
//  a network of lines representing meridians and parallels, on which a map or plan can be represented. 
 
var graticule = d3.geo.graticule() 
 
    // how to compute the major and minor extent for graticule ? 
 
    .extent([[-10, -40], [40 + 1e-6, 100 + 1e-6]]) 
 
    //step will define the dimensions of the rectangles within the map graticule 
 
    .step([2, 2]); 
 

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

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 

 
svg.append("path") 
 
    .datum(graticule) 
 
    .attr("class", "graticule") 
 
    .attr("d", path); 
 

 
d3.json("https://gist.githubusercontent.com/mohamed-ali/8732826/raw/06ef0c05110f9c1ed5f911399e9bc9283b640cf1/tunisia.json", function(error, topology) { 
 
    console.log(topology); 
 
    console.log(topojson.feature(topology, topology.objects.governorates)); 
 

 
    svg.append("path") 
 
     .datum(topojson.feature(topology, topology.objects.governorates)) 
 
     .attr("class", "boundary") 
 
     .attr("d", path); 
 

 
});

.graticule { 
 
    fill: none; 
 
    stroke: #777; 
 
} 
 

 
.boundary { 
 
    fill: #ccc; 
 
    fill-opacity: .8; 
 
    stroke: #000; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> 
 
<script src="http://d3js.org/topojson.v1.min.js"></script> 
 
<h1>Test D3 Geo Projection</div>

來源

2014-09-28 23:07:25 mccannf

如何計算d3.js衛星投影的投影旋轉和刻度延伸

回答

相關問題