我在大约以太平洋为中心的世界地图上使用d3.geo.conicEquidistant()投影,我的目的是从一个点绘制圆圈,从地图上的这一点开始说明一个特定距离,比如说1000km.
如果给定特定的公里数,如何计算投影的正确半径?
这是我的代码示例(是的,它是关于来自朝鲜的导弹到达.使用人工平壤作为发射点:),在此问题的基础上:将圆的半径(以米为单位)缩放到D3.js d3.geo.mercator地图
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: white;
stroke-width: 0.25px;
fill: grey;
}
circle {
stroke: red;
stroke-width: 1px;
stroke-dasharray: 5;
fill: transparent;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.conicEquidistant()
.center([0, 5 ])
.scale((width + 1) / 2 / Math.PI)//.scale(150)
.rotate([-160,0]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
var missiles = [
{
name: "missile1",
location: { // appx lat&long of pyongyang
latitude: 125.6720717,
longitude: 39.0292506
},
reach: 1000 //radius of circle in kilometers on map
},
{
name: "missile2",
location: { // appx lat&long of pyongyang
latitude: 125.6720717,
longitude: 39.0292506
},
reach: 3500 //radius of circle in kilometers on map
},
];
// load and display the World
d3.json("https://s3-us-west-2.amazonaws.com/vida-public/geo/world-topo-min.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries)
.geometries)
.enter()
.append("path")
.attr("d", path)
});
svg.selectAll(".pin")
.data(missiles)
.enter().append("circle", ".pin")
.attr("r", scaledRadius)
/*function(d) {
return d.reach
})*/
.attr("transform", function(d) {
return "translate(" + projection([
d.location.latitude,
d.location.longitude
]) + ")"
})
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我看了这个答案,在上面尝试了,但是不太能将它应用到我的代码中(说实话,我对d3很新,可能有一些非常明显的错误):https: //stackoverflow.com /一个/四百六十二万三千五百十九分之三千一百六十一万六千九百二十七
进一步的问题:这个解决方案是针对墨卡托投影的吗?
(让我们忽略我们真的需要在这个投影中隐藏南极洲.)
有两种方法可以实现这一目标.
一个(更简单的选项)使用d3的geoCircle功能来创建地理上圆形的功能:
var circle = d3.geoCircle().center([x,y]).radius(r);
Run Code Online (Sandbox Code Playgroud)
为此,x和y是以度为单位的中心点,r是以度为单位的圆的半径.要找到以米为单位的圆的半径,我们需要将米转换为度数 - 如果我们假设一个圆形地球(地球只是略微椭圆形,这是一个诱导误差高达0.3%,这是最简单的,但即使使用椭圆体,地球真的更像马铃薯形状,因此也会产生误差).使用平均半径6,371 km,我们可以得到一个粗略的公式:
var circumference = 6371000 * Math.PI * 2;
var angle = distance in meters / circumference * 360;
var circle = d3.geoCircle().center([x,y]).radius(angle);
Run Code Online (Sandbox Code Playgroud)
这给了我们类似的东西:
var width = 500;
var height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var projection = d3.geoAlbers()
.scale(200)
.translate([width/2,height/2]);
var path = d3.geoPath().projection(projection);
var usa = {"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[-94.81758,49.38905],[-88.378114,48.302918],[-82.550925,45.347517],[-82.439278,41.675105],[-71.50506,45.0082],[-69.237216,47.447781],[-66.96466,44.8097],[-70.11617,43.68405],[-70.64,41.475],[-73.982,40.628],[-75.72205,37.93705],[-75.72749,35.55074],[-81.49042,30.72999],[-80.056539,26.88],[-81.17213,25.20126],[-83.70959,29.93656],[-89.18049,30.31598],[-94.69,29.48],[-99.02,26.37],[-100.9576,29.38071],[-104.45697,29.57196],[-106.50759,31.75452],[-111.02361,31.33472],[-117.12776,32.53534],[-120.36778,34.44711],[-123.7272,38.95166],[-124.53284,42.76599],[-124.68721,48.184433],[-122.84,49],[-116.04818,49],[-107.05,49],[-100.65,49],[-94.81758,49.38905]]],[[[-155.06779,71.147776],[-140.985988,69.711998],[-140.99777,60.306397],[-148.018066,59.978329],[-157.72277,57.570001],[-166.121379,61.500019],[-164.562508,63.146378],[-168.11056,65.669997],[-161.908897,70.33333],[-155.06779,71.147776]]]]},"properties":{"name":"United States of America"},"id":"USA"}
]};
var circumference = 6371000 * Math.PI * 2;
var angle = 1000000 / circumference * 360;
var circle = d3.geoCircle().center([-100,40]).radius(angle);
svg.append("path")
.attr("d",path(usa));
svg.append("path")
.attr("d", path(circle()))
.attr("fill","steelblue");
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>Run Code Online (Sandbox Code Playgroud)
另一种选择是从自定义函数而不是通过d3动态创建geojson功能.最简单的方法是采取一个点,并计算距离相隔10度的轴承x米处的点数(对于圆圈为36点).这需要使用起点,方位和距离计算一个点,公式可以在这里找到.不久之前,我用这种方法建立了一个例子Tissot's indicatrix:天梭的Indicatrix Bl.ock.