Question

有没有什么方法可以在文件加载时围绕特定纬度和经度聚焦到d3世界地图。

这是一个工作的plunker，我可以放大d3世界地图。 plunker

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

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）：

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

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

或者，可能更符合您的标题，您可以使用缩放标识来设置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.

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

1 个答案: