使用 D3 和 Mapbox 制作带有坐标的路径答案

【问题标题】：Making a path with coordinates using D3 and Mapbox使用 D3 和 Mapbox 制作带有坐标的路径
【发布时间】：2016-06-20 17:14:33
【问题描述】：

我正在尝试使用 D3.svg.line() 创建一条线/路径，以使用 x/y 坐标连接一条路线。我的目标是类似于 Bay Area Bart 路线，并且想知道如何在车站之间创建连接路径，并最终在路径上生成一个“节点”动画。

我不知道如何在 mapbox 上覆盖路径

var canvas = d3.select('body').append('svg')
var group = canvas.append('g')
.attr('transform', 'translate(100, 100)');

var line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis");

group.selectAll('path')
.data([route1]) 
.enter()
.append('path')
.attr('d', line) 
.attr('fill','none')
.attr('stroke','black')
.attr('stroke-width', 10);

我的示例代码

http://bl.ocks.org/fogcity89/f543472d61fea6dcb1b5380abd41bb62

【问题讨论】：

标签： javascript d3.js mapbox

【解决方案1】：

不太清楚为什么要在这里使用 d3？

据我所知，您尝试在 D3 中绘制线条，使用纬度/经度坐标，然后将其作为 svg 图层添加到 mapbox 地图上方？

我的建议是为您的点创建一个GeoJSON-object，并将其作为GeoJSON layer 直接添加到mapbox 地图中。

然后您可以循环遍历所有站点（点）并创建连接它们的线。

【讨论】：

我和我的搭档正在尝试创建类似于飞行雷达或飞行跟踪器的东西，但使用在点对点之间动画的 bart 'trains'。我们有一个服务器和一个获取实时火车信息的算法，但目前只是试图为沿着路径行驶并接触每个车站的东西制作动画。像这样livetrain.nyc

【解决方案2】：

您可以使用mapbox-gl（基于webgl）来绘制路线和火车。

我在这里做了一个工作演示：https://jsfiddle.net/kmandov/6dk7h675/

这是方法：

首先将路由添加为 GeoJSON 源：

  map.addSource('route', {
    'type': 'geojson',
    'data': routeLineString
  });

  map.addLayer({
    'id': 'route',
    'type': 'line',
    'source': 'route',
    'paint': {
      'line-color': 'red',
      'line-width': 2
    }
  });

你添加的火车：

  map.addSource('train', {
    "type": "geojson",
    "data": trainOnRoute(0)
  });

  map.addLayer({
    "id": "train",
    "source": "train",
    "type": "circle",
    "paint": {
      "circle-radius": 10,
      "circle-color": "#007cbf"
    }
  });

“火车”是沿途的一个点。要生成该点，您可以使用 turfjs's along 模块。

function trainOnRoute(distance) {
  return turf.along(routeLineString, distance, 'miles');
}

最后，您通过更新 GeoJson 源来为火车沿路线设置动画：

  function animateTrain(timestamp) {
    // Update the data to a new position based on the animation timestamp. The
    // divisor in the expression `timestamp / 1000` controls the animation speed.
    map.getSource('train').setData(
      trainOnRoute(timestamp / 1000)
    );

    // Request the next frame of the animation.
    requestAnimationFrame(animateTrain);
  }

  // Start the animation.
  animateTrain(0);

此方法基于以下示例：

【讨论】：

谢谢！如何让“节点”在每个“站”处停止一段时间？