CP-090-010

Simbología etiquetas y clasificación etiquetas

by SIGC

HTML

<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/mapea.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/assets/css/mapea.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/configuration.js"></script>

<button onclick="aplicarCategoriaTextos()">Etiquetar por Clasificación</button>

<div id="map"></div>

CSS

<style rel="stylesheet">
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

JavaScript

// TEST
// Carga de capas puntuales para mostrar toponimia

// Aplicar visualizar labels en el estilo

// Mostrar clasificación en base a tipología que contenga diferentes tamaños para las eqtiquetas en función de los atributos

// APLICAR CLASIFICACIÖN


mapajs = M.map({
  container: "map",
  context: "cdau",
  controls: "layerswitcher"
});




let topo1 = new M.layer.WFS({
  name: "toponimia_nucleos",
  url: "http://www.callejerodeandalucia.es/servicios/base/wfs",
  legend: "Nombre núcleos",
  getfeatureinfo: "plain",
  geometry: 'POINT',
  extract: true
});


let topo2 = new M.layer.WFS({
  name: "toponimia_litoral",
  url: "http://www.callejerodeandalucia.es/servicios/base/wfs",
  legend: "Nombre mares",
  getfeatureinfo: "plain",
  geometry: 'POINT',
  extract: true
});


/*
'label': {
        text: 'FEATURE',
        font: 'bold italic 19px Comic Sans MS',
        rotate: false,
        scale: 0.9,
        offset: [10, 20],
        color: '#2EFEC8',
        stroke: {
            color: '#FE9A2E',
            width: 10
        },
        rotate: false,
        rotation: 0.5,
        align: M.style.align.RIGHT || ...,
        baseline: M.style.baseline.TOP || ...
    }
*/

let etiquetaPunto = new M.style.Point({
  fill: {
    color: 'brown'
  },
  stroke: {
    color: 'brown',
    width: 1
  },
  radius: 0,
  label: {
    text: '{{nombre}}',
    font: 'bold italic 10px Comic Sans MS',
    rotate: false,
    scale: 1,
    color: 'brown',
    stroke: {
      color: 'brown',
      width: 1
    },
    rotate: false,
    align: M.style.align.RIGHT,
    baseline: M.style.baseline.TOP
  }
});


let etiquetaPol = new M.style.Polygon({

  label: {
    text: '{{toponimo}}',
    font: 'bold italic 12px Comic Sans MS',
    rotate: true,
    rotation: 0.5,
    scale: 1,
    color: 'white',
    stroke: {
      color: 'white',
      width: 1
    },
    align: M.style.align.RIGHT,
    baseline: M.style.baseline.TOP
  }
});



let cabecera = new M.style.Point({
  label: {
   ...