我要怎么办
>在传单(或任何地图框架)的顶部覆盖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])
不确定如何工作,但查看了其他示例并弄清楚了.