D3js制图:自动对焦地理区域? (svg画布,缩放比例,坐标平移) [英] D3js cartography: auto-focus on geographic area ? (svg canvas, zoom scale, coordinate translation)
问题描述
我处理SRTM栅格数据以生成shape文件 - > geojson - > topojson,因此我可以用合适的格式提供D3js。
I processed SRTM raster data to generate shapefiles -> geojson -> topojson so I may feed D3js with a suitable format.
结果看起来像这样区域是我超大的svg画布):
The result look like this (the blue area is my oversized svg canvas):
给定感兴趣的地理区域(西边界,北,东,南)和中心:
Given geographic area of interest geo-borders (west border, North, East, South) and center:
// India geo-frame borders in decimal ⁰
var WNES = { "W": 67.0, "N":37.5, "E": 99.0, "S": 5.0 };
// India geo-center :
var latCenter = (WNES.S + WNES.N)/2,
lonCenter = (WNES.W + WNES.E)/2;
// HTML expected frame dimensions
var width = 713,
height = 724;
// Projection: projection, center coord, scale(?), translate:
var projection = d3.geo.mercator()
.center([lonCenter, latCenter])
.scale(width)
.translate([width/2, height/2]); // this push into the center of the html frame
// SVG injection:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
地理维度,SVG维度和比例之间的关系是什么?
如何尽可能简化自动对焦?
推荐答案
我重用了一些来自Bostock& a,进行一些编辑,以便输入您的焦点地理区域边界(十进制坐标):
I reused some code from Bostock & al, with some edits so you input your focus geo-area bounds (decimal coordinates):
var WNES = { "W": 67.0, "N":37.5, "E": 99.0, "S": 5.0 };
和目标svg画布' width (px) p>
and the target svg canvas' width (px) such :
var width = 600,
b $ b
可自动设置svg画布的高度,缩放比例和平移并完全在目标地理区域。
to automatically set the svg canvas' height, the zoom scale, and the translation in order to focus the display only on and fully on the target geo area.
// 1. -------------- SETTINGS ------------- //
// India geo-frame borders (decimal ⁰)
var WNES = { "W": 67.0, "N":37.5, "E": 99.0, "S": 5.0 };
// Geo values of interest :
var latCenter = (WNES.S + WNES.N)/2, // will not be used
lonCenter = (WNES.W + WNES.E)/2, // will not be used
geo_width = (WNES.E - WNES.W),
geo_height= (WNES.N - WNES.S);
// HTML expected frame dimensions
var width = 600,
height = (geo_height / geo_width) * width ; // height function of width with ratio of geo-frame (later requires equirectangular projection!)
// Projection: projection, reset scale and reset translate
var projection = d3.geo.equirectangular()
.scale(1)
.translate([0, 0]);
// Normal stuff: SVG injection:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Normal stuff: Path
var path = d3.geo.path()
.projection(projection)
.pointRadius(4);
// Data (getJSON: TopoJSON)
d3.json("final.json", showData);
// 2. ---------- FUNCTION ------------- //
function showData(error, fra) {
var Levels = topojson.feature(fra, fra.objects.levels);
// Focus area box compute to derive scale & translate.
var b = path.bounds(Levels), // get data's bounds as [[left, bottom], [right, top]] [[W, S], [E, N]]
s = 1 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
// Projection update
projection
.scale(s)
.translate(t);
//Normal stuff: Append my topojson objects => svg layers
svg.append("path")
.datum(Levels)
.attr("d", path)
svg.selectAll(".levels")
.data(topojson.feature(fra, fra.objects.levels).features)
.enter().append("path")
.attr("class", function(d) { return "Topo_" + d.properties.name; })
.attr("data-elev", function(d) { return d.properties.name; })
.attr("d", path)
}
结果是完美的:
>
查看:
-
path.bounds(feature) - 计算指定要素的投影边界框(以像素为单位)。
path.bounds(feature) -- Computes the projected bounding box (in pixels) for the specified feature.
自动对焦的印度地图(Hugo Lopez) - - 工作示例(具有自定义画布高度)
India relief map with auto-focus (Hugo Lopez) -- Working example (with custom canvas height)
将地图d3给定geoJSON对象(Bostock&
Center a map in d3 given a geoJSON object (Bostock & al.) -- critical help from there
项目到边框(Mike Bostock) - 工作示例(带有前缀画布尺寸)
Project to Bounding Box (Mike Bostock) -- Working example (with prefixed canvas dimensions)
D3js:如何设计地形图?(Hugo Lopez) - 使用makefile和html-d3js代码的教程。
D3js: How to design topographic maps? (Hugo Lopez) -- tutorial with makefile and html-d3js code.
这篇关于D3js制图:自动对焦地理区域? (svg画布,缩放比例,坐标平移)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!