Javascript 如何计算d3.js卫星投影的投影旋转和分划延伸_Javascript_D3.js

Javascript 如何计算d3.js卫星投影的投影旋转和分划延伸

javascript d3.js

Javascript 如何计算d3.js卫星投影的投影旋转和分划延伸,javascript,d3.js,Javascript,D3.js,我很难为卫星投影演示计算正确的参数。事实上，我正在尝试对地理位置34.0000°N，9.0000°E进行卫星投影。因此，d3.geo.卫星的旋转参数为： rotate([10, 34, ?]) 但我不知道如何定义滚动。另外，请您解释一下如何定义分划参数以下是我到目前为止所做的，但图表没有显示： <!DOCTYPE html> <meta charset="utf-8"> <style> .graticule { fill: none; str

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

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>

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

所以旋转[-10，-34，0]会让你大部分时间都在那里。滚动参数在使用它时非常明显-它只是在垂直向外的轴上沿一个方向或另一个方向旋转球体当前位置的视点

还请注意，没有指定范围的分划线覆盖球体。但是，您可以使用范围仅在感兴趣的地理区域周围绘制一层分划线。再次，我建议通过改变值和观察d3的反应来进行实验

下面的示例借用了gist中的JSON。如果您想试验这些值，我还建议使用类似的方法，每次更改值时都会重新绘制投影。我使用旋转[-15，-31，-20]添加了一个不同的透视图：

可变宽度=800，高度=600； //什么是一般投影？ var投影=d3.geo.satellite .距离1.1 .scale5500 //旋转是做什么的？ //如果指定了旋转，则将投影的三轴旋转设置为指定的经度、纬度和滚动度，并返回投影 .旋转[-15，-31，-20] //.旋转[36,10,32] //.旋转[76.00，-34.50,32.12] //中心：更改整个球体的中心 .center[-1,5] //倾斜有什么作用？经过几次测试，我还是不知道。。。 .10 .clipAngleMath.acos1/1.1*180/Math.PI-1e-6//不变 .精度。1； //分划是什么？ //表示子午线和平行线的线网络，在其上可以表示地图或平面图。 var分划=d3.geo.Gracile //如何计算分划的主要和次要范围？ .范围[-10，-40]，[40+1e-6100+1e-6]] //步骤将定义地图分划内矩形的尺寸 .步骤[2，2]； var path=d3.geo.path .投射投射； var svg=d3.selectbody.appendsvg .宽度，宽度 .身高,身高,； svg.appendpath .基准分划 .等级，分划 .attrd，路径； d3。jsonhttps://gist.githubusercontent.com/mohamed-ali/8732826/raw/06ef0c05110f9c1ed5f911399e9bc9283b640cf1/tunisia.json，函数错误，拓扑{ console.logtopology； console.logtopojson.featuretopology、topology.objects.Goverates； svg.appendpath .datumtopojson.featuretopology、topology.objects.Goverates .等级、边界 .attrd，路径； }; .分划{ 填充：无；中风：777例； } .边界{ 填充：ccc；填充不透明度：.8；中风：000； } 测试D3地理投影