如何用箭头创建 Openlayers 3 多边形？

Question

在研究中，我在下面的 link 中找到了一个箭头示例 http://openlayers.org/en/v3.8.2/examples/line-arrows.html

和向量层http://openlayers.org/en/v3.1.0/examples/vector-layer.html

我需要显示一个多边形，每边都有箭头。

请帮忙...

Answer 1

使用您提供的第一个示例，并执行以下修改。

将绘图交互的几何类型更改为多边形

map.addInteraction(new ol.interaction.Draw({
 source: source,
 type: /** @type {ol.geom.GeometryType} */ ('Polygon')
}));

在多边形的样式中添加填充颜色

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 = new ol.geom.LineString(
feature.getGeometry().getLinearRing(0).getCoordinates()
);

就这些了！！！和一个 fiddle here

更新

对于仅带箭头的矢量多边形图层样式的情况。我已经制作了一个 fiddle 来 demonstarte。我不知道你的情况，但提供的 fiddle 是一团乱麻。

如何用箭头创建 Openlayers 3 多边形？

How to create Openlayer 3 polygon with arrow?

javascript

openlayers-3