[Test] geoprint Line

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://mapea4-sigc.juntadeandalucia.es/plugins/printer/printer-2.0.0.min.css">
<script src="http://mapea4-sigc.juntadeandalucia.es/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
}, {}, {
  renderMode: "image",
  declutter: true
});

let estiloLinea = new M.style.Line({
  // borde de la linea
  'stroke': {
    // color del borde
    color: 'red',
    // grosor del borde en pixeles
    width: 5,
    linedash: [2, 2, 10],
    //linedashoffset: 20,
    //linecap: 'round',
    //linejoin: 'miter',
    //miterlimit: 15
  },
  // Relleno de la linea
  'fill': {
    color: 'yellow',
    width: 3,
    opacity: 1,
  },
  'label': {
    text: function(feature) {
      return stringDivider(feature.getAttribute('nombre'), 16, '\n');
    },
    font: 'bold italic 12px Comic Sans MS',
    rotate: false,
    scale: 1,
    offset: [0, 0],
    color: '#000000',
    /*stroke: {
      color: '#000000',
      width: 5,
      //linedash: [1, 5],
      //linedashoffset: 5,
      //linecap: 'square',
      //linejoin: 'miter',
      //miterlimit: 15
    },*/
    rotate: false,
    rotation: 0.7,
    align: M.style.align.LEFT,
    baseline: M.style.baseline.TOP,
    //textoverflow: 'hidden',
    //minwidth: 10,
    //path: true
  }
});

gasoductos.setStyle(estiloLinea);

mapajs.addLayers(gasoductos);

mapajs.addPlugin(new M.plugin.Printer({
  "params": {
    "pages": {
      "clientLogo": "http://www.juntadeandalucia.es/economiayhacienda/images/plantilla/logo_cabecera.gif",
      "creditos": "Impresi��n generada a trav��s de Mapea"
    },
    "layout": {
      "outputFilename": "mapea_${yyyy-MM-dd_hhmmss}"
    }
  }
}, {
  "options": {
    "legend": "true"
  }
}));

//https://stackoverflow.com/questions/14484787/wrap-text-in-javascript
function stringDivider(str, width, spaceReplacer) {
  if (str.length > width) {
    var p = width;
    while (p > 0 &&...