CP-040-01 Features sobre capa GeoJSON + AttributeTable

Mapea 5 Crea dos features pasando la especificación GeoJSON completa, incluyendo geometría y lo carga sobre una capa GeoJSON (antiguo: http://jsfiddle.net/sigcJunta/ucte2hLa/)

by SIGC

HTML

<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/plugins/stylemanager/stylemanager.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/configuration.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/assets/css/mapea.ol.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.7/chroma.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/plugins/stylemanager/stylemanager.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/plugins/attributetable/attributetable.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/plugins/attributetable/attributetable.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/plugins/printer/printer.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/plugins/printer/printer.ol.min.js"></script>
<div id="map"></div>

CSS

html,
 body {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
 }

JavaScript

// CP-040-01 Features sobre capa GeoJSON + AttributeTable
//
// Prueba carga de features sobre capa GeoJSON
// 1.- Carga 2 features sobre capa GeoJSON
// 2.- Prueba AttributeTable con la información de la capa
// 3.- Establece estilo para capa
// 4.- Modifica estilo de cada uno de los features cargados -- Se aplica a través de un on.LOAD


let mapajs = M.map({
  container: "map",
  wmcfile: "callejero",
  controls: ["layerswitcher", "mouse"]
});






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"
  }
}));


var feature2 = new M.Feature("featurePrueba002", {
  "type": "Feature",
  "id": "prueba_pol_wfst.1985",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [
      [
        [
          [263800.72265536943, 4085361.4590256726],
          [230910.00600234355, 4031901.3328427672],
          [288293.77947248437, 4017678.0840030923],
          [263770.72265536943, 4085361.4590256726],
          [263800.72265536943, 4085361.4590256726],
        ]
      ]
    ]
  },
  "geometry_name": "the_geom",
  "properties": {
    "cod_ine_municipio": "41091",
    "cod_ine_provincia": "-",
    "area": 1234,
    "perimetro": 345,
    "cod_gesta": 0,
    "cod_ine_comunidad": "-",
    "nombre": "feature 2",
    "nom_provincia": "sevilla",
    "alias": "prueba f2",
    "nom_ccaa": "Andalucía"
  }
});


feature2.setStyle(new M.style.Polygon({
  fill: {
    color: 'red',
    opacity: 0.2
  }
}));

var feature3 = new M.Feature("featurePrueba003", {
  "type": "Feature",
  "id": "prueba_pol_wfst.1983",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [
      [
        [
          [295159.9680309201, 4238875.348804371],
          [253470.94665364627,...