Question

我使用d3.js制作我国家/地区的地图我使用谷歌地图网址来提取某些点的经度和纬度值。为了使用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]]);

Answer 1

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

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

所以你的代码应该是这样的：

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

如何使用d3.js将纬度和经度转换为（x，y）坐标

1 个答案: