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]]
}

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

关于如何实现这一点的任何建议。我应该通过计算角点来绘制三角形吗？我应该使用旋转的图像吗？如果是的话，我该如何计算旋转度数？

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 仅在您的行的第一段添加箭头

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

Openlayers 3 draw start point(CSP) of a line string

gis

openlayers-3