OpenLayers绘制箭头报错coordinates.getGeometry is not a function求助

核心错误原因 #

• 参数调用错误：ol.interaction.Draw的geometryFunction回调的第一个入参coordinates是用户绘制过程中生成的坐标点数组，不属于Feature实例，没有getGeometry方法，调用该方法直接触发报错。
• 配置项混淆：geometryFunction的作用是将用户输入的坐标转换为对应几何实例，要求返回值为ol.geom.Geometry类型。你将样式生成逻辑写在该配置项中属于用法错误，箭头样式的生成逻辑应该放在style配置项中。

修正后代码示例 #

var arrowInteraction = new ol.interaction.Draw({
  type: 'LineString',
  source: vectorLayer.getSource(),
  // 样式逻辑统一放在style配置项中
  style: function(feature) {
    var geometry = feature.getGeometry();
    var styles = [
      // 主线样式
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#ffcc33',
          width: 2
        })
      })
    ];

    geometry.forEachSegment(function (start, end) {
      var dx = end[0] - start[0];
      var dy = end[1] - start[1];
      var rotation = Math.atan2(dy, dx);

      // 注意：如果使用EPSG:4326投影，偏移量需要从200000改为更小的数值，例如0.002
      var lineStr1 = new ol.geom.LineString([end, [end[0] - 200000, end[1] + 200000]]);
      lineStr1.rotate(rotation, end);
      var lineStr2 = new ol.geom.LineString([end, [end[0] - 200000, end[1] - 200000]]);
      lineStr2.rotate(rotation, end);

      var stroke = new ol.style.Stroke({
        color: 'green',
        width: 1
      });

      styles.push(new ol.style.Style({
        geometry: lineStr1,
        stroke: stroke
      }));
      styles.push(new ol.style.Style({
        geometry: lineStr2,
        stroke: stroke
      }));
    });

    return styles;
  }
});

额外说明 #

如果需要绘制完成后箭头样式永久保留，给对应矢量层也设置相同的样式即可。

内容的提问来源于stack exchange，提问作者Geographos