javascript-将传单缩放级别与d3地理比例相匹配

我要怎么办

>在传单(或任何地图框架)的顶部覆盖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投影,使其与传单对齐.我怎样才能做到这一点？

谢谢！

解决方法:

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

不确定如何工作,但查看了其他示例并弄清楚了.

标签：svg,d3-js,leaflet,gis,javascript
来源： https://codeday.me/bug/20191122/2057023.html