Как вычислить поворот и сетку проекции для спутниковой проекции d3.js

У меня трудное время вычисляет правильные параметры для демонстрации спутниковой проекции. На самом деле, я пытаюсь сделать спутниковую проекцию местоположения гео 34,0000 ° N, 9,0000 ° E. Таким образом, поворот параметра для d3.geo.satellite() будет:Как вычислить поворот и сетку проекции для спутниковой проекции d3.js

rotate([10, 34, ?])

Но Я не знаю, как определить рулон. Кроме того, не могли бы вы объяснить, как определить параметры graticule.

Вот что я сделал до сих пор, но график не показывает:

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

источник

2014-09-28 MedAli

Да, вы получили это право - единственное, что вы должны сделать номера отрицательного из-за направление вращения.

Таким образом, rotate([-10, -34, 0]) доставил бы вам большую часть пути. Параметр roll очень очевиден, когда вы играете с ним - он просто поворачивает точку обзора текущего местоположения земного шара в том или ином направлении на оси, указывающей перпендикулярно.

Также обратите внимание, что линии сетки, не указанные в указанном объеме, покрывают земной шар. Тем не менее, вы можете использовать экстенты только для того, чтобы нарисовать слой линий сетки вокруг интересующего географического региона. Опять же, я рекомендую экспериментировать, изменяя значения и видя, как реагирует 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>

источник

2014-09-28 23:07:25 mccannf

Как вычислить поворот и сетку проекции для спутниковой проекции d3.js

ответ

Смежные вопросы