如何使用d3.js将纬度和经度转换为(x,y)坐标

Question

如何使用d3.js将纬度和经度转换为(x,y)坐标

3

我正在使用d3.js制作我的国家地图。我使用谷歌地图的URL提取一些点的经纬度值。为了在d3中显示一个点，我需要将其转换为像素的(x,y)值，并将其存储在城市数组中。我知道这个问题涉及到投影，但我无法解决它。

以下是我的代码的一部分：

var projection = d3.geoMercator().fitSize([width, height], json);
var path = d3.geoPath().projection(projection); 


var URL =  "https://www.google.com.tr/maps/place/Ankara/@39.9035553,32.6223376,11z/data=!3m1!4b1!4m5!3m4!1s0x14d347d520732db1:0xbdc57b0c0842b8d!8m2!3d39.9333635!4d32.8597419?hl=tr";

var splitUrl = URL.split('@');
var coords = splitUrl[1].split(',');

console.log(coords[0]); 
console.log(coords[1]); 

cities.push([coords[0], coords[1]]);

- Mert AKEL

将纬度和经度转换为(x,y)值总会有一些误差，因为没有办法在平面上放置一个球体而不使球体变形。你应该使用哪种方法来生成这些(x,y)坐标取决于你将用这些坐标做什么目的。你想做什么？ - Pedro Castilho

我想在我的地图上绘制从谷歌地图链接中检索到的坐标。 - Mert AKEL

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pedro Castilho · Accepted Answer

您不需要将您的数据转换为像素中的（x，y）对。当您使用d3.geoPath.projection(projection)时，您已经将您的d3.geoPath()路径发生器设置为使用指定的投影方式自动将（纬度，经度）对转换为（x，y）对。

您需要做的是采用您的（lat，long）对并使用它们生成一个GeoJSON对象，然后将其提供给您的d3.geoPath生成器。您可能需要一个GeoJSON点。

所以你的代码应该长这样:

var projection = d3.geoMercator().fitSize([width, height], json);
var pathGenerator = d3.geoPath(projection);

var URL =  "https://www.google.com.tr/maps/place/Ankara/@39.9035553,32.6223376,11z/data=!3m1!4b1!4m5!3m4!1s0x14d347d520732db1:0xbdc57b0c0842b8d!8m2!3d39.9333635!4d32.8597419?hl=tr";

var splitUrl = URL.split('@');
var coords = splitUrl[1].split(',');

var geoJsonPoint = {
    type: "Point",
    coordinates: coords,
} 

pathGenerator.path(geoJsonPoint);