匹配的传单缩放级别与d3地理比例

Question

我想做什么？

• 在传单（或任何地图框架）上叠加SVG图层。
• 在我的SVG图层中使用d3js和d3.geo.mercator位置元素，使它们正确定位在传单上。
• 我只能访问缩放级别，地图中心（纬度/经度），地图SVG元素的宽度和高度。
• 我只需要听取缩放级别和地图中心的更改，以便知道何时重新定位我的SVG元素。

我已经使SVG元素与传单层的大小相同; 并将其作为叠加层。

我现在怎么做？

我有一些与小叶的值（Map.zoom，Map.width，Map.height，Map.center）对齐的全局变量。

Map.center = [43, -72];
Map.zoom = 3;

Map.projection = d3.geo.mercator()
            .center([Map.center[1], Map.center[0]])
             // I think this is the problem. I don't really understand this.
            .scale(256 * Math.pow(2, Map.zoom))
            .translate([Map.width / 2, Map.height / 2])

Map.lt = new L.Map...(center is Map.center, zoom is Map.zoom)

任何时候传单更改我更新全局值并重新计算Map.projection。

我有一个功能：

function transform(d) {
    d = Map.projection(d.value.geometry.coordinates[0], d.value.geometry.coordinates[1]);

    return "translate(" + d[0] + "," + d[1] + ")";
}

然后在我需要定位的对象和元素上调用：

object.attr("transform", transform);

我的问题是图层不同步。

当我将地图放在[43，-72]上并且我看到返回的x，y值（来自Map.projection）时，它正好位于我的SVG层的中间，所以我猜我的比例有问题。 我不确定如何使这些值正确排列。

我不想使用d3.geo.tile或d3.geo.path（），因为我需要更灵活地控制元素的定位和动画。

我只是想知道如何利用d3功能排列传单与SVG层的位置。 我不希望依靠传单来定位我的物品，因为我将来可能不会使用传单; 我只需要能够缩放/翻译我的d3.geo.mercator投影，使其与传单对齐。 我怎样才能做到这一点？

谢谢！

Answer 1

Map.projection = d3.geo.mercator()
            .center([Map.center[1], Map.center[0]])
            .scale((1 << 8 + Map.zoom) / 2 / Math.PI)
            .translate([Map.width / 2, Map.height / 2])

不确定它是如何工作的，但看了一些其他的例子并弄清楚了。

Answer 2

这就是我最终得到的结果（不要对JS的奇怪性感到惊讶 - 它是ES6）：

const convertZoomLevelToMercator = (zoomLevel) =>
  Math.pow(2, 8 + zoomLevel) / 2 / Math.PI;
const convertZoomLevelFromMercator = (zoomLevelInMercator) =>
  Math.log(zoomLevelInMercator * 2 * Math.PI) / Math.LN2 - 8;

测试：

console.log(convertZoomLevelToMercator(1));
console.log(convertZoomLevelToMercator(5));
console.log(convertZoomLevelToMercator(10));
console.log(convertZoomLevelToMercator(15));
console.log(convertZoomLevelToMercator(20));
console.log('----');
console.log(convertZoomLevelFromMercator(convertZoomLevelToMercator(1)));
console.log(convertZoomLevelFromMercator(convertZoomLevelToMercator(5)));
console.log(convertZoomLevelFromMercator(convertZoomLevelToMercator(10)));
console.log(convertZoomLevelFromMercator(convertZoomLevelToMercator(15)));
console.log(convertZoomLevelFromMercator(convertZoomLevelToMercator(20)));

输出：

81.48733086305042
1303.797293808806
41721.51340188181
1335088.428860218
42722829.72352698
----
1
5
10
15
20