javascript - 如何创建带有箭头的 Openlayers 3 多边形？

Question

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

对于矢量图层http://openlayers.org/en/v3.1.0/examples/vector-layer.html

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

请帮忙...

Answer 1

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

1. 将绘制交互的几何类型更改为多边形

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

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

   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)'
     })
   })
   ];
   

3. 在样式函数中，将多边形的外环作为线串

   var geometry = new ol.geom.LineString(
   feature.getGeometry().getLinearRing(0).getCoordinates()
   ); 
   

就这些了!和一个fiddle here

更新

对于仅使用箭头设置矢量多边形图层样式的情况。我做了一个fiddle恶魔启动。我不知道你的情况，但提供的 fiddle 是一堆乱七八糟的箭头。