如何向使用 D3.js 創建的地圖添加或創建地圖比例尺

Question

我正在尋求有關創建用於 D3.js 可縮放地圖的地圖比例尺的幫助。 我經常使用 D3.js 為我的工作創建地圖。 我從未在我過去構建的地圖上放置比例尺，但我最近收到要求在地圖上包含比例尺的請求。 我在網上搜索了某種類型的示例來構建，但我找不到任何東西。 我玩弄了 d3.scale.linear() 但我無法創建任何有用的東西。

我試圖創建的是一個地圖比例尺，當使用 d3.behavior.zoom() 放大和縮小時，它會相應地調整它的數字。 對此問題的任何幫助（工作模型或構建的東西）將不勝感激。 先感謝您。

Answer 1

您需要在 Web 比例尺中解決幾個問題：

地圖距離會因投影而異
D3 投影投影經緯度數據，不能直接用於測量物理距離
必須使用大圓距離測量物理距離

不久前，我為地圖設計了一個比例尺，使用此處的公式計算地理坐標之間的物理距離。 但是你用哪兩個點來測量距離呢？ 我使用了兩個點，當它們連接形成一條穿過地圖框中心的線時（水平方向，而不是橫向地圖的邊緣），靠近地圖中心的比例尺可能最能代表整個地圖比例尺。 要使用 svg 坐標獲取點的地理位置，請使用projection.invert([x,y])獲取您的經度和緯度。

有了這兩個點，您應該能夠計算物理距離和 svg 坐標距離，為您提供比例所需的信息。 這可能看起來像：

var scaleWidth = width / 4;
var p1 = projection.invert([width/2 - scaleWidth/2, height / 2]);
var p2 = projection.invert([width/2 + scaleWidth/2, height / 2]);
var geoDistance = getDistance(p1,p2);

其中getDistance是一個返回兩個地理點之間的大圓距離的函數，這個函數返回的地理距離在地圖上用width/4像素表示。 現在，對於最簡單的比例，您可以繪制一個width/4 pixels寬的矩形，並將其標記為getDistance long 返回的距離。

請注意，如果您每次都選擇相同的兩個 svg 點作為比例的參考點，比例尺可能會顯示非圓形長度。 因此，您需要修改距離直到獲得足夠的整數，然后在角落中繪制比例尺（除非 1.954 公里寬的比例尺可以，否則這也會更快）。

要縮放，只需重新繪制（並重新計算兩個中心點之間的距離，縮放因子對此無濟於事）和/或轉換比例以表示參考點之間的新物理距離（根據需要重新計算它們以形成整數）。

這是正在運行的秤塊，以及下面的圖像：