本文介绍了从d3-tile检索地理坐标的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在地理图块地图上返回[x,y]地理坐标.如果您在控制台上查看以下 jsfiddle 的日志,您会发现它们出了错.我使用的是projection.invert()函数,我假设该函数从像素向后工作以返回到地理坐标...我在做什么错了?

I am trying to return [x,y] geo coordinates on a geo tile map. If you look in the console log on the following jsfiddle you will see they are coming out wrong. I am using the projection.invert() function, which I assume works backwards from the pixels to get back to the geo coordinates ... what am I doing wrong?

这是尝试获取坐标的代码位:

This is the bit of code that tries to seize the coordinates:

function mousemoved() {
  console.log(formatLocation(projection.invert(d3.mouse(this)), d3.zoomTransform(this).k));
}

function formatLocation(p, k) {
  var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
  return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " "
       + (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E");
}

我知道的

推荐答案

D3-tile示例(和您的小提琴)(包括d3-tile文档中的大多数示例)通常使用投影比例尺的1/tau(没有投影转换值)将在单个像素的空间内绘制地球.

D3-tile examples (and your fiddle) that I'm aware of (including most of the examples in the d3-tile documentation) generally use a projection scale of 1/tau (and no projection translate values) which would draw the earth within the space of a single pixel.

var projection = d3.geoMercator()
    .scale(1 / tau)
    .translate([0, 0]);

在投影将3维纬度/经度对转换为笛卡尔坐标的同时,d3缩放会进行所有缩放和平移以填充地图尺寸.将鼠标坐标转换为长/纬对时,必须考虑这种缩放.

While the projection converts the 3 dimensional latitude/longitude pairs to Cartesian coordinates, a d3-zoom does all the scaling and translating to fill the map dimensions. This zoom must be accounted for when inverting mouse coordinates to long/lat pairs.

因此,要获取svg上某个点的纬度/经度对,我们需要回溯.如果要反转缩放比例,首先需要获取鼠标坐标,然后才能反转投影:

So to get the latitude/longitude pairs of a point on the svg, we need to backtrack. First we need to get the mouse coordinate if we were to invert the zoom, and then we can invert the projection:

var transform = d3.zoomTransform(svg.node()); // get the current zoom
var xy = transform.invert(d3.mouse(this));
var longlat = projection.invert(xy);

(另请参见transform.invert()上的此答案

这是更新的小提琴.

这篇关于从d3-tile检索地理坐标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 15:05
查看更多