D3.js - 如何添加具有默认滚轮鼠标缩放行为的缩放按钮

Question

所以我使用默认的 d3.behavior.zoom() 和限制以防止地图被完全拖出页面，得到了一个带有鼠标缩放的世界地图。开始工作很痛苦，但现在可以工作了。

我现在的问题是这个项目还需要界面中无用的缩放 + 和 - 按钮，我找不到具有两种缩放类型的示例。它要么是鼠标缩放，要么是一个糟糕的按钮缩放。

我尝试简单地调用 zoom.scale(newScale);但它不更新任何东西。我似乎在正确的轨道上，因为在控制台中您可以看到比例已更新，但没有更新，当我用鼠标缩放时，它突然跳到使用按钮定义的比例。但似乎我还需要更新翻译，我不确定如何获得地图中心并计算缩放到那里所需的翻译。

我还需要知道在调用 zoom.scale(newScale); 之后如何更新投影如果这是这样做的方法。

我用缩放按钮做了一个简化的演示，显然现在不能正常工作。 http://bl.ocks.org/jfmmm/f5c62bc056e557b80447

谢谢！

编辑： 现在如此接近，它缩放到地图的中心，因为我使用了与计算屏幕中间相同的计算方法，但使用了新的比例。问题是我希望它放大屏幕中间的对象，而不是地图中间的国家。

function zoomBtn(action) {
    var currentZoom = zoom.scale();

    if( action == 'in' ){
        if(currentZoom < options.maxZoomLevel){
            var newScale = Math.floor(currentZoom) + 1;

            var b = path.bounds(mapFeatures);
            var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];

            zoom.scale(newScale)
                .translate(t)
                .event(svg);
        }
    }else{
        if(currentZoom > options.minZoomLevel){
            var newScale = Math.floor(currentZoom) - 1;

            var b = path.bounds(mapFeatures);
            var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];

            zoom.scale(newScale)
                .translate(t)
                .event(svg);
        }
    }
}

我会在几分钟内更新我的示例。

Answer 1

放大到屏幕中心而不是向左上角或 0lat/0lon 放大的数学计算是相当棘手的。我从Wil Linssen's example 复制它，并将其移植到 Mike Bostock 的Map Pan & Zoom I 上。重要的是，该示例使用 SVG 变换来重新渲染地图，而不是不断地重新计算投影。您可能希望按钮通过以下几种方式工作：

• Zoom Buttons I - 按下按钮会导致转换到新视图。按住按钮不会重新开始转换。

• Zoom Buttons II - 按住按钮会导致新视图立即更新，每 40 毫秒。这会导致令人不快的跳跃，尤其是在反复单击按钮时。

• Zoom Buttons III - 持续 100 毫秒的链式转换，直到不再按住按钮或达到 scaleExtent。控制逻辑防止任何不需要的即时平移。这是要使用的。

再次重申，正确获取详细信息很棘手，这就是我提供完整示例的原因。但令人满意的是，核心逻辑确实是有道理的。您正在对向量进行归零、拉伸和取消归零：

x = (x - center[0]) * factor + center[0];
y = (y - center[1]) * factor + center[1];