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

How to compute projection rotate and graticule extend for d3.js satellite projection

本文关键字：投影 旋转 扩展 网格 js 何计算 计算 d3      更新时间：2023-09-26

我很难为卫星投影演示计算正确的参数。事实上，我正试图对地理位置34.0000°N，9.0000°E进行卫星投影。因此，d3.geo.sattellite（）的旋转参数为：

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>

是的，你做对了——唯一的问题是，由于旋转的方向，你必须使数字为负。

所以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>

相关文章：