[TEST-5.0.0] estilo Line flecha

by Francisco

HTML

<script src="http://mapea4-sigc.juntadeandalucia.es/js/mapea-5.0.0.ol.min.js"></script>
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration-5.0.0.js"></script>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea-5.0.0.ol.min.css">
<link rel="stylesheet" href="http://sigc.desarrollo.guadaltel.es/mapea5/plugins/printer/printer-2.0.0.min.css">
<script src="http://sigc.desarrollo.guadaltel.es/mapea5/plugins/printer/printer-2.0.0.ol.min.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var mapajs = M.map({
  container: "map",
  controls: ["layerswitcher"],
  wmcfiles: ["cdau"],
  center: [235661, 4139173],
  zoom: 8
});

var gasoductos = new M.layer.WFS({
  url: "http://www.ideandalucia.es/dea100/wfs?",
  name: "dea100:ie03_gasoducto",
  legend: "Gasoductos",
  geometry: 'MLINE',
  extract: true
});

let estiloLinea = new M.style.Line({
  stroke: {
    color: 'blue',
    width: 3,
    opacity: 1,
  },

});

gasoductos.setStyle(estiloLinea);

mapajs.addLayers(gasoductos);

// Si se quiere separar en otra layer
//var flechas = [];
// Añadimos la capa 
/*let flechas_layer = new M.layer.GeoJSON({
  source: {
    "crs": {
      "properties": {
        "name": "EPSG:25830"
      },
      "type": "name"
    },
    "features": [],
    "type": "FeatureCollection"
  },
  name: "Sentido",
});
mapajs.addLayers(flechas_layer);*/

gasoductos.on(M.evt.LOAD, function(features) {
  features.forEach(function(feature) {
    let geom = feature.getGeometry();
    //console.log('Geometria', geom);

    geom.coordinates.forEach(function(tramo) {

      let start = tramo[tramo.length - 2];
      let end = tramo[tramo.length - 1];

      let dx = end[0] - start[0];
      let dy = end[1] - start[1];
      let rotation = Math.atan2(dy, dx);

      var estiloPunto = new M.style.Point({
        icon: {
          src: 'https://openlayers.org/en/latest/examples/data/arrow.png',
          rotation: -rotation,
        }
      });

      //console.log('Creando feature...');
      let id = Math.random();
      let fp = new M.Feature(id, {
        properties: {},
        type: "Feature",
        id: id,
        geometry_name: "geometry",
        geometry: {
          type: "Point",
          coordinates: end
        }
      });
      fp.setStyle(estiloPunto);
      gasoductos.addFeatures([fp]);
      // Si se tuvieran en otra layer, se añadirian a esa

    });


  });
})

mapajs.addPlugin(new...