gpt4 book ai didi

d3.js - 使用 d3.js 缩放和平移以太平洋为中心的墨卡托 map

转载 作者:行者123 更新时间:2023-12-04 02:13:02 25 4
gpt4 key购买 nike

抱歉,如果这是我对显而易见的事情视而不见的简单案例,但我正在尝试整理一个页面,该页面显示以太平洋为中心的墨卡托投影中的世界地图(数据来自 TopoJSON 文件)。 IE。左边是欧洲,右边是美国,中间是澳大利亚。有点像这样...
The Pacific Centered World
从这一点开始,我希望能够根据自己的心愿缩放和平移 map ,但是当我向东或向西平移时,我希望 map “四处”滚动而不是来到世界尽头(我希望这能让感觉)。
我目前正在处理的代码在这里(或以下要点( https://gist.github.com/d3noob/4966228 )或 block ( http://bl.ocks.org/d3noob/4966228 ));

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {font-size:11px;}
path {
stroke: black;
stroke-width: 0.25px;
}
</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,
velocity = .005,
then = Date.now()
height = 475;

var projection = d3.geo.mercator()
.center([0, 0 ])
.scale(1000);

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");


d3.json("world-110m.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries).geometries)
.enter()
.append("path")
.attr("d", path)
.style("fill","black")

d3.timer(function() {
var angle = velocity * (Date.now() - then);
projection.rotate([angle,0,0]);
svg.selectAll("path")
.attr("d", path.projection(projection));
});

var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")")
});

svg.call(zoom)

});
</script>
</body>
</html>
该代码是示例的混合体,因此我可以看到一个可以自动从西向东旋转的 map ,我可以使用鼠标进行平移和缩放,但是在平移和缩放时,据我所知,我正在影响内部“g”元素而不是“svg”元素中的 map 。
有很多很好的例子可以平移和缩放以子午线为中心的 map 。但在我发现的反子午线上没有。
任何帮助将不胜感激。

最佳答案

我最终解决了同样的问题。这里是 an example ( see code ) 向左/向右平移以旋转投影(带环绕),向上/向下平移以平移(由最大绝对纬度限制),也可以缩放。确保投影始终适合 View 框。

我学到了很多关于缩放行为以及投影中心()和旋转()交互的知识。

关于d3.js - 使用 d3.js 缩放和平移以太平洋为中心的墨卡托 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14909054/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com