Question

我尝试使用带有正交投影的角度旋转地图。我的目标是在不使用拖放或鼠标移动的情况下将地图置于特定地点的中心。

我的地图是这样创建的：

var projection = d3.geo.orthographic()
     .scale(248)
     .clipAngle(90);

var svg = d3.select(element[0]).append('svg')
    .attr('preserveAspectRatio', 'xMidYMid')
    .attr('viewBox', '0 0 ' + width + ' ' + height)
    .attr('width', mWidth)
    .attr('height', mWidth * height / width);

svg.append('rect')
   .attr('class', 'background')
   .attr('width', width)
   .attr('height', height);

var g = svg.append('g').attr('id', 'myid');

(...)

我在这个主题上看到了这篇有趣的文章：http://www.jasondavies.com/maps/rotate/。但是这会告诉你如何使用事件。

如何使用角度值做同样的事情？

感谢您的帮助！亨利

Answer 1

使用projection.rotate()可以为您提供所需的轮播。

var lat = 54.6    // latitude 54.6S,
    lon = -22.3   // longitude 22.3E;

projection.rotate([lat, lon]);

这会将投影旋转到以阵列形式提供的坐标为中心。

Answer 2

要在正交投影下将地图居中到特定位置，可以使用：

projection.rotate([-longitude, -latitude])

还有关于轮换的交互式文档： https://www.d3indepth.com/geographic/#rotate

使用正交投影角度更新地图旋转

2 个答案: