gpt4 book ai didi

d3.js - d3.geo.path 矩形包裹错误的方式

转载 作者:行者123 更新时间:2023-12-01 03:37:25 25 4
gpt4 key购买 nike

这个简单的 geojson 矩形在一些 geojson 查看器中正确显示,我按预期得到了一个矩形。但是当我用 d3 做它时,矩形似乎环绕。

var polygonData = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[ -100, -20 ],
[ -100, 20 ],
[ 100, 20 ],
[ 100, -20 ],
[ -100, -20 ]
]
]
},
"properties": {}
};

var width = 1000;
var height = 500;

var projection = d3.geo.equirectangular()
.scale(100)
.translate([width / 2, height / 2])
.rotate([0, 0])
.center([0, 0])
.precision(0);

var path = d3.geo.path()
.projection(projection);

var svg = d3.select("body").append("svg")
.attr({
width: width,
height: height
});

svg.append('path')
.datum(polygonData)
.attr({
d: path,
fill: 'orange',
opacity: 0.5
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
</style>
</head>

<body>

</body>


这是我用 geojson viewer 得到的结果:

geojson viewer

但这是我从上面得到的 d3 code :

geojson using d3

反转缠绕顺序只会填充相反的形状,并不能解决问题。我猜这是一个逆子午线切割问题。一种解决方法是添加一些中间点以强制路径不环绕,但我需要能够使用更复杂的路径自动执行此解决方案。

知道如何将这个 geojson 与 d3 一起使用并强制它像其他 geojson 查看器一样将其显示为 map 上的简单矩形吗?

最佳答案

我不认为,D3 有什么可指责的;据我了解,其他 GeoJSON 查看器出错了。作为一个生活在或多或少平坦表面上的人,很容易被欺骗相信一个有四个角的多边形,像你这样精心选择坐标应该看起来像一个矩形。在足够小的尺度上并给出合适的投影,这甚至适用于球面几何。但由于您的积分几乎相差半个地球,因此情况并非如此。

为了阐明这一点,我使用正交投影来显示一些地理特征以及多边形:

Orthographic projection

从这个 View 可以明显看出,沿子午线的线是连接点的第一条边 [-100,-20][-100,20] .从那时起[-100,20]在墨西哥西北部的某个地方是 great arc ,即最短连接,到下一个点 [100,20]绕地球一半。然后该路径类似地围绕南半球封闭。因此,多边形的轮廓是地球表面上按给定顺序连接所有点的最短路径。

尽管您的多边形是由其坐标决定的,但其外观将取决于所使用的投影。这是使用墨卡托投影的同一多边形的另一个 View :

Mercator projection

关于d3.js - d3.geo.path 矩形包裹错误的方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33523932/

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