javascript - 如何计算 d3.js 卫星投影的投影旋转和网格扩展

我很难为卫星投影演示计算正确的参数。事实上，我正在尝试对地理位置 34.0000° N，9.0000° E 进行卫星投影。因此，d3.geo.satellite() 的旋转参数将是:

rotate([10, 34, ?])

但是我不知道怎么定义roll。另外，能否请您解释一下如何定义格线参数。

这是我到目前为止所做的，但图表没有显示:

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

最佳答案

是的，您没看错 - 唯一的问题是，由于旋转方向，您必须使数字负。

所以 rotate([-10, -34, 0]) 会让您完成大部分工作。当您使用它时，roll 参数非常明显 - 它只是在垂直指向外的轴上沿一个方向或另一个方向旋转地球当前位置的视点。

另请注意，没有指定范围的经纬网覆盖了地球。但是，您可以仅使用范围在感兴趣的地理区域周围绘制一层经纬网。同样，我建议通过更改值进行试验并查看 d3 的 react !

下面的示例(从您的要点中借用 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>

关于javascript - 如何计算 d3.js 卫星投影的投影旋转和网格扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26084400/

javascript - 如何计算 d3.js 卫星投影的投影旋转和网格扩展

上一篇：javascript - Cordova WebSQL - onSubmit

下一篇：javascript - 将文件从客户端上传到 Azure Blob 存储 | MVC