d3.js - 地图投影上的弯曲 geojson 多边形边缘
问题描述
我正在尝试使用 d3.js 和 geojson 在不同的地图投影上绘制矩形。映射的坐标看起来是正确的,但是边缘看起来以一种奇怪的方式弯曲。我知道这可能与真实地球上的最短路径有关,但我想要的是边缘遵循投影的平行/子午线。有没有办法做到这一点?任何人都可以帮忙吗?
示例:Aitoff 投影 示例:墨卡托 这是我正在使用的代码:
<!DOCTYPE html>
<html>
<head>
<title>World Map</title>
<meta charset="utf-8">
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<style>
path {
fill: red;
stroke: #000;
stroke-width: .1px;
}
.graticule {
fill: none;
stroke: #000;
stroke-width: .2px;
}
.foreground {
fill: none;
stroke: #333;
stroke-width: 1.2px;
}
</style>
</head>
<body>
<svg width="960" height="600"></svg>
<script>
const svg = d3.select("svg")
const myProjection = d3.geoMercator()
const path = d3.geoPath().projection(myProjection)
const graticule = d3.geoGraticule()
const geojson = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": {
"color": "blue"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[-80.0, 50.0], [-20.0, 50.0], [-20.0, -10.0], [-80.0, -10.0], [-80.0, 50.0]]]
} }
]
}
function drawMap(err, world) {
if (err) throw err
svg.append("g")
.selectAll("path")
.data(topojson.feature(world, world.objects.land).features)
.enter().append("path")
.attr("d", path);
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
svg.append("path")
.datum(graticule.outline)
.attr("class", "foreground")
.attr("d", path);
svg.append("g")
.selectAll("path")
.data(geojson.features)
.enter().append("path")
.attr("d", path)
}
d3.json("https://unpkg.com/world-atlas@1.1.4/world/50m.json", drawMap)
</script>
</body>
</html>
解决方案
您的假设是正确的:d3 使用很大的圆距离来绘制线条:这意味着使用 d3 geoProjection 和 geoPath 的两点之间的任何路径都遵循这两点之间的最短真实世界路径。这表示:
- 无论投影如何,两点之间的相同路径都与其他地理点和要素对齐
- 反经络可算
- 生成的地图更准确地描绘了线条。
要绘制直线和/或平行线(子午线是落在它们上的两点之间的最短路径 - 因此路径已经遵循这一点,假设没有旋转的刻度)有几种可能性。
最简单的解决方案是使用像墨卡托这样的圆柱投影来创建自定义 geoTransform。与 d3.geoProjections 不同,d3.geoTransforms 不使用球面几何,而是使用笛卡尔数据。因此,它们不会沿线进行采样以创建曲线:在处理笛卡尔数据时这是不必要的。这允许我们在 geoTransform 中为 geojson 顶点使用球面几何,同时仍然在地图上保持直线:
var transform = d3.geoTransform({
point: function(x, y) {
var projection = d3.geoMercator();
this.stream.point(...projection([x,y]));
}
});
如下图所示:
var projection = d3.geoMercator();
var transform = d3.geoTransform({
point: function(x, y) {
var projection = d3.geoMercator();
this.stream.point(...projection([x,y]));
}
});
var color = ["steelblue","orange"]
var geojson = {type:"LineString",coordinates:[[-160,60],[30,45]]};
var geojson2 = {type:"Polygon",coordinates:[[[-160,60,],[-80,60],[-100,30],[-160,60]]]}
var svg = d3.select("body")
.append("svg")
.attr("width",960)
.attr("height",500);
svg.selectAll(null)
.data([projection,transform])
.enter()
.append("path")
.attr("d", function(d) {
return d3.geoPath().projection(d)(geojson)
})
.attr("fill","none")
.attr("stroke",function(d,i) { return color[i]; } )
.attr("stroke-width",1);
svg.selectAll(null)
.data([projection,transform])
.enter()
.append("path")
.attr("d", function(d) {
return d3.geoPath().projection(d)(geojson2)
})
.attr("fill","none")
.attr("stroke",function(d,i) { return color[i]; } )
.attr("stroke-width",2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
橙色线使用变换,蓝色线使用普通墨卡托
在某些情况下,您可以将投影的精度(调节自适应采样)设置为一些荒谬的高数字,这将适用于某些线条,但由于反子午线切割等原因,这不适用于其他线条:
var projection = d3.geoMercator().precision(1000000);
var transform = d3.geoTransform({
point: function(x, y) {
var projection = d3.geoMercator();
this.stream.point(...projection([x,y]));
}
});
var color = ["steelblue","orange"]
var geojson = {type:"LineString",coordinates:[[-160,60],[30,45]]};
var geojson2 = {type:"Polygon",coordinates:[[[-160,60,],[-80,60],[-100,30],[-160,60]]]}
var svg = d3.select("body")
.append("svg")
.attr("width",960)
.attr("height",500);
svg.selectAll(null)
.data([projection,transform])
.enter()
.append("path")
.attr("d", function(d) {
return d3.geoPath().projection(d)(geojson)
})
.attr("fill","none")
.attr("stroke",function(d,i) { return color[i]; } )
.attr("stroke-width",1);
svg.selectAll(null)
.data([projection,transform])
.enter()
.append("path")
.attr("d", function(d) {
return d3.geoPath().projection(d)(geojson2)
})
.attr("fill","none")
.attr("stroke",function(d,i) { return color[i]; } )
.attr("stroke-width",2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
如果您想在非圆柱投影上绘制与平行线对齐的线,这两种方法都不起作用。对于圆柱投影,平行线是直的。上述方法只会创建直线。如果平行线不是直线投影,例如 Aitoff,则线将不会与经纬网对齐。
要让一条线跟随平行线,您需要沿路径对点进行采样,因为投影的平行线不会都是直的,并且平行线不会遵循很大的圆距离。因此,默认投影和上述方法都不适用于这些情况。
采样时,您需要将数据视为笛卡尔坐标 - 本质上是使用圆柱投影(Plate Carree)使线条平行。
推荐阅读
- robotframework - 如何在 Robot Framework 中使用默认为 None 的可选参数创建关键字?
- android - 获取 ImageButton 中使用的图像名称
- r - 为什么使用 grid_arrange 时网格/轴线会消失?
- asp.net - SameSite=None w/ IE11 中的安全中断 iFrame
- azure - Azure DevOps 变量组未在 Azure 函数配置中应用
- django - django db 和 sqlite 使用不同的参数样式?
- csv - 谷歌云存储 + CDN + CNAME 配置
- .net - VueJS从孩子修改父变量
- java - 遍历 Mat 时出现 NullpointerException
- c++ - 在 C++ 中使用 return 进行锻炼