Question

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

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>

Answer 1

是的，你做得对 - 唯一的事情是你必须根据轮换的方向设置数字否定。

所以rotate([-10, -34, 0])会让你大部分都在那里。当你玩它时，roll参数非常明显 - 它只是在垂直指向的轴上以一个方向或另一个方向旋转地球当前位置的视点。

另请注意，没有指定范围的经纬网线覆盖地球。但是，您可以使用范围仅在感兴趣的地理区域周围绘制一层经纬网线。同样，我建议通过更改值并观察d3如何反应来进行实验！

下面的示例（从您的要点借用JSON）。如果您想试验这些值，我还建议您使用类似Plunker的内容，每次更改值时都会重绘投影。我使用rotate([-15, -31, -20])添加了不同的视角：

＆＃13;

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);

});

＆＃13;

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

＆＃13;

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

＆＃13;

如何计算d3.js卫星投影的投影旋转和经纬网延伸

1 个答案: