Javascript 在拓扑图上查找缩放距离_Javascript_D3.js_Topojson

Javascript 在拓扑图上查找缩放距离

javascript d3.js

Javascript 在拓扑图上查找缩放距离,javascript,d3.js,topojson,Javascript,D3.js,Topojson,我一直在评估将像素空间与给定投影的距离（以实单位）联系起来的不同方法。我发现以下几点非常有用： var actual_map_bounds = d3.geo.bounds(this_topojson); var radians = d3.geo.distance(actual_map_bounds[0], actual_map_bounds[1]); var earth_radius = 3959; // miles var arc_length = earth_ra

我一直在评估将像素空间与给定投影的距离（以实单位）联系起来的不同方法。我发现以下几点非常有用：

var actual_map_bounds = d3.geo.bounds(this_topojson);

    var radians = d3.geo.distance(actual_map_bounds[0], actual_map_bounds[1]);
    var earth_radius = 3959;  // miles
    var arc_length = earth_radius * radians;  // s = r * theta

    var projected_map_bounds = [
      this_projection(actual_map_bounds[0]),
      this_projection(actual_map_bounds[1])
    ];

    var projected_map_width = projected_map_bounds[1][0] - projected_map_bounds[0][0];
    var projected_map_height = projected_map_bounds[0][1] - projected_map_bounds[1][1];
    var projected_map_hypotenuse = Math.sqrt(
      (Math.pow(projected_map_width, 2)) + (Math.pow(projected_map_height, 2))
    );

    var pixels_per_mile = projected_map_hypotenuse / arc_length;
    var pixel_distance = pixels_per_mile * miles;

但是我当前的应用程序将通过减少所需的计算步骤而受益匪浅。topojson开发人员有没有更简单或更“优雅”的解决方案？

我想我理解你的要求，它实际上与

d3

没有任何关系，而只是JavaScript。问题是：

我如何使它成为一个可重用的函数，在不使用全局变量的情况下不会重新运行大部分计算

答案是结束：

function pixelLength(this_topojson, this_projection) {

    var actual_map_bounds = d3.geo.bounds(this_topojson);

    var radians = d3.geo.distance(actual_map_bounds[0], actual_map_bounds[1]);
    var earth_radius = 3959;  // miles
    var arc_length = earth_radius * radians;  // s = r * theta

    var projected_map_bounds = [
      this_projection(actual_map_bounds[0]),
      this_projection(actual_map_bounds[1])
    ];

    var projected_map_width = projected_map_bounds[1][0] - projected_map_bounds[0][0];
    var projected_map_height = projected_map_bounds[0][1] - projected_map_bounds[1][1];
    var projected_map_hypotenuse = Math.sqrt(
      (Math.pow(projected_map_width, 2)) + (Math.pow(projected_map_height, 2))
    );

    var pixels_per_mile = projected_map_hypotenuse / arc_length;

    return function(miles){
      var pixel_distance = pixels_per_mile * miles;
      return pixel_distance;
    }
  }

现在，

pixelLength

将返回一个函数，该函数可用于反复计算相同地形和投影的像素距离：

var pixelCalc = pixelLength(topojson.feature(data, data.objects['parishes']), projection4);

pixelCalc(1); // pixels for 1 mile
pixelCalc(100); // pixels for 100 miles

这就是它的作用：


地图距离比例尺
身体{
填充：0；
保证金：0；
字体系列：helvetica、arial、无衬线字体；
}
.教区{
填充物：白色；
行程：777；
笔划不透明度：0.5；
笔划宽度：0.5px；
不透明度：0.8；
}
1.教区边界{
填充：无；
冲程：#3535；
笔划不透明度：0.4；
笔划宽度：0.5px；
不透明度：0.8；
}
.国家边界{
填充：无；
冲程：#5858；
}
.距离刻度{
字体大小：11px；
线高：11px；
位置：绝对位置；
字号：500；
文本转换：大写；
颜色：#000；
}
.距离刻度线{
行程：#000；
笔画宽度：1；
笔画不透明度：1；
不透明度：1；
填写：#000；
}
可变宽度=960，
高度=500；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var projection4=d3.geo.albers（）
.center（[0,31.2]）
.旋转（[91.6,0]）//逆时针旋转（俯视北极）
.平行线（[29,33]）
.translate（[宽度/2，高度/2]）
.比例尺（6000）；
var map_path4=d3.geo.path（）.pointRadius（2.projection4）；
队列（）
.defer（d3.json，“https://jsonblob.com/api/e98bb5d0-df6f-11e6-90ab-c5f0718ee343")
.等待（准备好）；
函数pixelLength（该投影）{
var-actual_-map_-bounds=d3.geo.bounds（此为JSON）；
var弧度=d3.地理距离（实际地图边界[0]，实际地图边界[1]）；
var earth_半径=3959；//英里
var弧长=地球半径*弧度；//s=r*θ
变量投影映射边界=[
此_投影（实际_映射_边界[0]），
此投影（实际映射边界[1]）
];
var projected_map_width=projected_map_界限[1][0]-projected_map_界限[0][0]；
var projected_map_height=projected_map_界限[0][1]-projected_map_界限[1][1]；
var投影图斜边=Math.sqrt(
（Math.pow（投影贴图宽度，2））+（Math.pow（投影贴图高度，2））
);
var pixels_per_mile=投影图_斜边/弧长；
返回功能（英里）{
var pixel_distance=每英里像素数*英里数；
返回像素距离；
}
}
功能就绪（错误、数据）{
如果（错误）抛出错误；
var map4=svg.append（“g”）
.attr（“班级”、“教区”）
.attr（“id”、“map4”）；
地图4.选择全部（“路径”）
.data（topojson.feature（data，data.objects.parishs.features）
.enter（）.append（“路径”）
.attr（“d”，地图路径4）；
map4.append（“路径”）
.datum（topojson.mesh（data，data.objects.parishs，function（a，b）{返回a！==b；}））
.attr（“类”、“教区边界”）
.attr（“d”，地图路径4）；
map4.append（“路径”）
.datum（topojson.mesh（data，data.objects.parishs，function（a，b）{返回a==b；}））
.attr（“类别”、“州边界”）
.attr（“d”，地图路径4）；
//距离标度
//线路路径发生器
var line=d3.svg.line（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）
.插入（“依据”）；
//刻度4
var pixelCalc=pixelength（topojson.feature（data，data.objects['parishs'）），projection4）；
var distance_scale4=svg.selectAll（“distance-scale4”）
.数据（d3.范围（1100,5））
.enter（）.append（“g”）
.attr（“等级”、“距离标度”）
.attr（“id”、“距离标度4”）
.attr（“转换”，函数（d，i）{
返回“translate（20），+（i*20+40）+”）
})
.attr（“宽度”，函数（d）{返回d；}）；
距离4.append（'text'）
.attr（“文本锚定”、“开始”）
.文本（功能（d）{
返回d+“英里”；
});
距离4.append（'path'）
.attr（“等级”、“距离刻度线”）
.attr（“d”，函数（d，i）{
var p=像素计算（d）；
变量lineData=[
{“x”：0，“y”：0}，
{“x”：p，“y”：0}
];
返回行（lineData）；
});
}