CP-070-01

StylePoint (A nivel de capa y features)

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>
<div>
<p>Estilos a nivel de capa:</p>
<div>
<button onclick="setStyleNull()">style null</button>
<button onclick="setStyleVacio()">style vacio</button>
<button onclick="setStyleLayer(points, nullStylePoint)">style point sin parametros</button>
<button onclick="setStyleLayer(points, colorStylePoint)">style point solo fill: color</button>
<button onclick="setStyleLayer(points, strokeStylePoint)">style point solo stroke: color</button>
<button onclick="setStyleLayer(points, radiusStylePoint)">style point solo radius</button>
<br>
<button onclick="setStyleLayer(points, stylePoint)">Estilo punto ejemplo 1</button>
<button onclick="setStyleLayer(points, stylePoint2)">Estilo punto ejemplo 2</button>
<button onclick="setStyleLayer(points, stylePoint3)">Estilo punto ejemplo 3</button>
<button onclick="setStyleLayer(points, stylePoint4)">Estilo punto ejemplo 4</button>
<button onclick="setStyleLayer(points, stylePoint5)">Estilo punto ejemplo 5</button>
<button onclick="setStyleLayer(points, stylePoint6)">Estilo punto ejemplo 6</button>
<button onclick="setStyleLayer(points, stylePointForm)">Estilo punto ejemplo Form</button>
</div>
<p>Estilos a nivel de feature:</p>
<div>
<button onclick="setStyleFeature(point, nullStylePoint)">Style point sin parametros</button>
<button onclick="setStyleFeature(point, colorStylePoint)">Style point solo fill:color</button>
<button onclick="setStyleFeature(point, strokeStylePoint)">Style point solo stroke:color</button>
<button onclick="setStyleFeature(point, radiusStylePoint)">Style point solo radius</button>
<br>
<button onclick="setStyleLayer(point, stylePoint)">Estilo punto ejemplo 1</button>
<button onclick="setStyleLayer(point, stylePoint2)">Estilo punto ejemplo...

CSS

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

JavaScript

// CP-070-01 - StylePoint (A nivel de capa y features) 
// Caso de prueba orientado a verificar la aplicación de estilos a nivel de capa y a nivel de features.


// constructor del mapa
let mapajs = M.map({
  container: "map",
  projection: "EPSG:4326*d",
  layers: ["OSM"],
  center: {
    x: -5.9584180843195425,
    y: 37.36912689160224
  },
  zoom: 5,
  controls: ['layerswitcher', 'overviewmap', 'mouse'],
});



let points = new M.layer.WFS({
  name: "Centros ASSDA - Subtipos",
  url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
  namespace: "mapea",
  name: "assda_centros",
  legend: "centrosassda",
  geometry: 'POINT',
});
mapajs.addLayers([points]);

// Seleccionamos un punto que esté en el centro de Andalucía para localizarlo mejor (MARINALEDA)
let point = null;
points.on(M.evt.LOAD, function() {
 point = points.getFeatures()[0];
});
		

// Estilos nulos 
let nullStylePoint = new M.style.Point();
// Estilos solo color
let colorStylePoint = new M.style.Point({
  fill: {
    color: 'red'
  }
});

// Estilos stroke
let strokeStylePoint = new M.style.Point({
  stroke: {
    color: 'red',
  }
});

// estilo radius

let radiusStylePoint = new M.style.Point({
  radius: 9
});

//============================================================================
// Ejemplos variados de estilos de puntos

let stylePoint = new M.style.Point({
  stroke: {
    color: '#C8FE2E',
    width: 15,
    linedash: [1, 20],
    linedashoffset: 60,
    linecap: 'square',
    linejoin: 'miter',
    miterlimit: 15
  },
  radius: 20
});
let stylePoint2 = new M.style.Point({
  radius: 20,
  fill: {
    color: 'red',
    opacity: 0.5
  }
});
let stylePoint3 = new M.style.Point({
  radius: 25,
  label: {
    text: 'FEATURE',
    font: 'bold italic 19px Comic Sans MS',
    rotate: false,
    scale: 0.9,
    offset: [10, 20],
    color: '#2EFEC8',
    stroke: {
      color: 'blue',
      width: 23,
      linedash: [1, 20],
      linedashoffset: 60,
      linecap: 'square',
     ...