Highcharts连接mappoint与“方向”

Question

我发布了一张带有Highcharts的互动地图。 它代表了意大利3年来艺术家的道路。 它包含一个连接3点的系列。 如何在路径上“打印”箭头以复制路径的“方向”？

      {
          type: "mappoint",
          lineWidth: 2,
          data: [
              { lat: 41.108679365839755, lon: 16.849069442461108 },
              { lat: 40.65378710700787, lon: 14.759846388659303 },
              { lat: 41.90017321198485, lon: 12.16516614442158 }
          ]
      }

完整的代码在jsfiddle上 http://jsfiddle.net/0ghkmjpg/

Answer 1

您可以包装一个负责在地图中渲染线条的方法并更改路径，使其在点之间显示箭头。您可以在简单的折线图here中看到答案。

您也可以直接使用Renderer并在加载/重绘事件中绘制路径。

渲染路径的功能可能如下所示：

function renderArrow(chart, startPoint, stopPoint) {
  const triangle = function(x, y, w, h) {
    return [
      'M', x + w / 2, y,
      'L', x + w, y + h,
      x, y + h,
      'Z'
    ];
  };

  var arrow = chart.arrows[startPoint.options.id];

  if (!arrow) {
    arrow = chart.arrows[startPoint.options.id] = chart.renderer.path().add(startPoint.series.group);
  }

  const x1 = startPoint.plotX;
  const x2 = stopPoint.plotX;

  const y1 = startPoint.plotY;
  const y2 = stopPoint.plotY;

  const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
  const h = Math.min(Math.max(distance / 3, 10), 30);
  const w = h / 1.5;

  if (distance > h * 2) {
    const offset = h / 2 / distance;
    const y = y1 + (0.5 + offset) * (y2 - y1);
    const x = x1 + (0.5 + offset) * (x2 - x1);

    const arrowPath = triangle(x - w / 2, y, w, h);
    const angle = Math.round(Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI) + 90;

    arrow.attr({
      d: arrowPath.join(' '),
      transform: `rotate(${angle} ${x} ${y})`,
      fill: 'black',
      zIndex: 10,
      visibility: 'visible'
    });
  } else {
    arrow.attr({
      visibility: 'hidden'
    });
  }
}

循环通过点并渲染箭头的函数

function renderArrows() {
  if (!this.arrows) {
    this.arrows = {};
  }

  const points = this.series[1].points;
  points.reduce((start, stop) => {
    renderArrow(this, start, stop);
    return stop;
  });
}

在加载/重绘事件上附加渲染箭头

Highcharts.mapChart('container', {

chart: {
  animation: false,
  events: {
    load: renderArrows,
    redraw: renderArrows
  }
},

当然，在这个问题上有很多空间箭头应该如何表现 - 它们是否应该始终保持恒定大小，何时出现/消失，箭头的形状和样式等等 - 但你应该能够调整上面的代码。

实例和输出

http://jsfiddle.net/jq0oxtpw/