将D3中的世界地图放大到给定纬度和经度附近的特定级别
有没有办法，我可以集中到d3世界地图周围的一个特定的纬度和经度加载文件。
这是我可以在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回答 1
Stack Overflow用户
发布于 2018-01-03 16:45:58
如果中心点由要素确定，则为
如果您的点是要素质心，则可以使用该要素自动将地图居中：
有几种方法可以实现这一点，一种方法是将投影设置为以特征为中心：
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个。
https://stackoverflow.com/questions/48080723
复制相似问题
腾讯云开发者
