我有一张图像，我知道墨卡托投影的左下角和右上角坐标（纬度/经度）。
我将它添加到 Google Maps 中google.maps.GroundOverlay，这给了我正确的结果
我在图像的左上角（绿色）、右上角（红色）、右下角（青色）和左下角（红色）添加了一些颜色标记。
这一切都很好，除了我想使用 topojson 从 Google Maps 转移到 d3，因为 d3 更轻量级并且不需要 Google Map 的功能。
我创建了基于 d3 的地图，包括图像角落的标记，结果如下：
如果我覆盖两个窗口（包含 Google Maps 地图的浏览器和包含 d3 地图的浏览器），那么我可以让国家边界和角点非常精确地重叠。
这是一个动画 gif，它在 Google Maps 地图浏览器上具有 d3-map 浏览器，并且在工具的帮助下正在更改 d3-map 浏览器窗口的透明度。它从完全不透明变为完全透明，然后再次变为完全不透明。显示国家名称的图像是谷歌地图之一。
如您所见，这些点和国家边界对齐得非常好，但雷达图像却没有。将 d3 图像向下移动一点可以缓解问题，但不是正确的解决方案。我知道谷歌地图显示的是。
我在做什么：在 d3 地图中我正在创建投影
projection = d3.geo.mercator().scale(scale).translate([width / 2, width / 2]).center(center);
然后创建提供的图像 latlong 角的边界框。
bb = {
east: 16.0,
west: 4.0,
north: 56.0,
south: 46.0,
}
并将它们从 latlong 空间投影到画布 x,y 坐标中。
p_ur = projection([bb.east, bb.north]).map(function(x) { return x; })
p_ll = projection([bb.west, bb.south]).map(function(x) { return x; })
p_ul = projection([bb.west, bb.north]).map(function(x) { return x; })
p_lr = projection([bb.east, bb.south]).map(function(x) { return x; })
当我画圆圈时，位置与谷歌地图上的位置非常精确。这意味着投影正在工作。
circle = svg.append("svg:circle").attr('cx',p_ll[0]).attr('cy',p_ll[1]).attr('r', 2).attr("class", "ll")
circle = svg.append("svg:circle").attr('cx',p_ur[0]).attr('cy',p_ur[1]).attr('r', 2).attr("class", "ur")
circle = svg.append("svg:circle").attr('cx',p_ul[0]).attr('cy',p_ul[1]).attr('r', 2).attr("class", "ul")
circle = svg.append("svg:circle").attr('cx',p_lr[0]).attr('cy',p_lr[1]).attr('r', 2).attr("class", "lr")
在画圆圈之前，我正在画topojson国家边界
path = d3.geo.path().projection(projection);
countries = svg.append("g");
// ...fetching the data from the web...
countries.selectAll('.country')
.data(topojson.feature(data, data.objects.europe).features)
.enter()
.append('path')
.attr('class', 'country')
.attr('d', path);
问题来了：我以一种非常“便宜”的方式应用图像。我将左上角的 latlong 投影到画布 x,y 空间中，并将其用作svg:image. 这些点已经为上面的色环计算出来了，所以我在这里重新使用它们。
image = svg.append("svg:image")
.attr('x', p_ul[0])
.attr('y', p_ul[1])
.attr('width', (p_lr[0] - p_ul[0]))
.attr('height', (p_lr[1] - p_ul[1]))
.attr('preserveAspectRatio', 'none')
.attr("xlink:href","http://.../current.png")
不知何故，我只是使用角落将图像固定在地图顶部，从而跳过了图像单个像素数据的投影变换。
我假设我应该将图像的每个 x,y 位置视为纬度/经度位置，然后通过墨卡托投影将每个像素投影到地图上。
但我不知道该怎么做。有任何想法吗？是否有类似于 d3.geo 的简单叠加插件google.maps.GroundOverlay？