___ELIM_CP-070-07 Panel StylePoint

Panel de estilos para puntos

by SIGC GUADALTEL

HTML

<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearchbylocation/geosearchbylocation.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/assets/css/mapea.ol.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/wfstcontrols/wfstcontrols.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearch/geosearch.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/printer/printer.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/measurebar/measurebar.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/streetview/streetview.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/vendor/browser-polyfill.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/configuration.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearchbylocation/geosearchbylocation.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/wfstcontrols/wfstcontrols.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearch/geosearch.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/printer/printer.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/measurebar/measurebar.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.min.css">
<div class="row">
      <table id=tableStyle>
       ...

CSS

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

         #tableStyle {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        table#tableStyle td{
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        table#tableStyle th{
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        table#tableStyle tr:nth-child(even) {
            background-color: #dddddd;
        }

        .display-hidden {
          display: none;
        }

      </style>

JavaScript

// CP-070-07 Panel StylePoint
// Caso de prueba orientado a verificar las caracterísitcas de estilo de puntos

function  ocultarTable (elementToManage) {
          let element = document.getElementById(elementToManage+"-td");
          if (element.classList.contains("display-hidden")) {
            element.classList.remove("display-hidden")
          }
          else {
            element.classList.add("display-hidden")
          }
        }


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


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

        mapajs.addLayers([puntos]);

        var stylePoint = new M.style.Point({
          'fill': {
            'color': '#fff',
            'opacity': 0.5,
          },
          'stroke': {
            'color': '#C8FE2E',
            'width': 5
          },
          'label': {
            'rotate': false,
            'font': 'bold italic 9px family',
            'scale': 1,
            'offset': [10, 20],
            'color': '#BCBCBC',
            'stroke': {
              'color': '#C8FE2E',
              'width': 15,
              'linedash': [1, 20],
              'linedashoffset': 60,
              'linecap': 'square',
              'linejoin': 'miter',
              'miterlimit': 15
            },
            'align': M.style.align.LEFT,
            'baseline': M.style.baseline.TOP,
            'text': 'Feature',
            'rotation': 0.05
          },
          'radius': 24,
          'icon': {
            'src':...