在D3中缩放世界地图到给定纬度和经度周围的特定级别

Question

有什么方法可以让我在加载文件时专注于围绕特定纬度和经度的 d3 世界地图。

这是工作 plunker，我可以在其中缩放 d3 世界地图。 普伦克

下面的代码用于放大点击。

function clicked() {
currScale2 = projection.scale();
if(beforeClickValue == 0)
beforeClickValue = 150;
beforeClickValue = beforeClickValue + 100;
projection.scale(beforeClickValue);
g.selectAll("path").attr("d", path);
}

如果我在肯尼亚提供特定位置，我需要放大肯尼亚附近或周围，例如：

Latitude    0.55378653650984688  
Longitude   35.661578039749543

Answer 1

如果中心点由要素确定

如果您的点是要素质心，则可以使用该要素自动将地图居中：

有几种方法可以实现此目的，一种是将投影设置为以要素为中心：

projection.fitSize([width,height],geoJSONKenyaTurkana);

fitSize 采用边界框(您的 svg)的宽度和高度，并设置投影的比例和平移，以最大化该边界框中要素的大小。 .fitExtent将在边距方面提供更大的灵活性：

projection.fitExtent([[10,10],[width-10,height-10]],geoJSONKenyaTurkana);

这将提供 10 像素的边距：第一个坐标是边界框的左上角，而第二个坐标是右下角。

使用任一方法将投影设置为居中后，您可以在放大投影时追加要素 - 但是，缩放约束将相对于此起点。这是使用这种方法(使用fitSize)的plunkr：

https://plnkr.co/edit/E7vqcwwISmmxUarCsWvw?p=preview

我已使用您的功能集合作为功能，但您可以将其集中在功能集合中的单个功能上。

---

或者，可能更符合你的标题，你可以使用缩放标识来设置 d3.zoom 的初始缩放因子，这将操作 svg 而不是投影并使用缩放函数：

var bounds = path.bounds(geoJSONKenyaTurkana), 
dx = bounds[1][0] - bounds[0][0], 
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
svg.call(_zoom.transform, d3.zoomIdentity
.scale(scale) 
.translate(translate[0]/scale,translate[1]/scale)
);

这给了我们看起来像这样的东西：

https://plnkr.co/edit/CpL4EDUntz853WzrjtU0?p=preview

---

如果要手动设置中心点

但是，如果要将地图设置为根据手动设置的点居中，则可以按照与上述大致相同的方式完成此操作：修改投影或修改缩放：

要修改投影，可以使用 .center()，它采用坐标并将地图居中放在该点上：

projection.center([longitude,latitude])

当然，点没有面积，因此您必须自己设置比例因子，该值将取决于您要显示的内容：

projection.center([longitude,latitude]).scale(k);

值越大，放大得越大。

或者，要操作缩放函数，我们可以使用以下内容：

var x = projection([35.661578039749543,0.55])[0],
y = projection([35.661578039749543,0.55])[1],
scale = 20,  
translate = [width / 2 - scale * x, height / 2 - scale * y];
svg.call(_zoom.transform, d3.zoomIdentity
.scale(scale) 
.translate(translate[0]/scale,translate[1]/scale)
);

与将投影设置为以特定点为中心一样，您需要手动设置比例值。在这里，我任意选择了20个。