如何计算d3.js卫星投影的投影旋转和刻度扩展

Question

I am having hard time computing the right parameters for a demo of satellite projection. 我很难为卫星投影演示计算正确的参数。 In fact, I am trying to make a satellite projection of the geo location 34.0000° N, 9.0000° E. So, the rotate parameter for the d3.geo.satellite() would be : 实际上，我正在尝试对地理位置34.0000°N，9.000°E的卫星进行投影。因此，d3.geo.satellite（）的旋转参数为：

rotate([10, 34, ?])

But I don't know how to define the roll. 但是我不知道如何定义胶卷。 Also, could you please explain how to define graticule parameters. 另外，请您解释一下如何定义刻度参数。

Here's what I did till now, but the graph is not showing: 这是我到目前为止所做的，但是该图未显示：

<!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>

Answer 1

Yes, you got it right - the only thing is that you have to make the numbers negative because of the direction of the rotation. 是的，您做对了-唯一的事情是，由于旋转方向，您必须使数字为负数。

So rotate([-10, -34, 0]) would have got you most of the way there. 因此， rotate([-10, -34, 0])将带给您大部分帮助。 The roll parameter is very obvious when you play with it - it just rotates the view point of the current location of globe in one direction or another on the axis that is pointing perpendicularly out. 当您使用roll参数时，它非常明显-它只是在垂直指向的轴上沿一个方向或另一个方向旋转地球仪当前位置的视点。

Also note that the graticule lines, without an extent specified, cover the globe. 还要注意，没有指定范围的方格线覆盖地球。 However, you can use extents just to draw a layer of graticule lines just around the geographic region of interest. 但是，您可以使用范围仅在感兴趣的地理区域周围绘制刻度线层。 Again, I recommend experimenting by changing values and seeing how d3 reacts! 再次，我建议您通过更改值进行实验并查看d3的反应！

Example below (borrowing the JSON from your gist). 下面的示例（从要旨中借用JSON）。 If you want to experiment with the values, I also recommend using something like Plunker which will redraw the projection each time you make a change to a value. 如果您想试验这些值，我还建议您使用类似Plunker的工具，该方法将在您每次更改值时重新绘制投影。 I used rotate([-15, -31, -20]) to add a different perspective: 我使用了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>

如何计算d3.js卫星投影的投影旋转和刻度扩展

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-09-28 23:07:25

如何计算d3.js卫星投影的投影旋转和刻度扩展

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-09-28 23:07:25

解决方案1
2 已采纳 2014-09-28 23:07:25