Openlayers 3绘制线串的起点（CSP）

Question

我有一个行字符串的geojson，如下所示。

{
    "type" : "LineString",
    "coordinates" : [[123.5555, 26.33869, 0], [123.5555, 33.5555, 0], [123.5555, 40.763938, 0], [126.460214, 40.378269, 0]]
}

我需要在线串的开头画一个三角形来指示方向和起点。考虑到前两组坐标，三角形的尖端应指向线串前进的方向。

有关如何实现这一目标的任何建议。 我应该通过计算角点来绘制三角形吗？ 如果是，我应该使用带有一些旋转的图像，那么我该如何计算旋转度？

Answer 1

您可以使用代表geojson几何体的矢量图层的样式函数来实现这一目的。

所以你的样式函数应该是这样的（示例函数在你的每一段上添加一个箭头）：

var styleFunction = function(feature) {
var styles = [
    // linestring
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 2
      }),
      fill: new ol.style.Fill({
      color: 'rgba(255,0,0,0.5)'
      })
    })
  ];
    var geometry = feature.getGeometry();
    geometry.forEachSegment(function(start, end) {
    var dx = end[0] - start[0];
    var dy = end[1] - start[1];
    var rotation = Math.atan2(dy, dx);
    // arrows
    styles.push(new ol.style.Style({
      geometry: new ol.geom.Point(start),
      image: new ol.style.Icon({
        src: 'http://openlayers.org/en/v3.14.2/examples/data/arrow.png',
        anchor: [0.75, 0.5],
        rotateWithView: false,
        rotation: -rotation
      })
    }));
  });

  return styles;
};

然后将此函数设置为矢量图层的样式参数

检查此fiddle

此处还有一个fiddle只在行的第一段添加箭头