CP-CHAP-07 - Carga GeoJSON con distintas proyecciones

Prueba para mostrar GeoJSON en mapa con distinta proyección.

by SIGC GUADALTEL

HTML

<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/printer/printer.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/printer/printer.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.ol.min.js"></script>
<div id="map"></div>

CSS

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

JavaScript

// Crea mapa con proyección por defecto en 4326
// Añade directamente capa KML, WMS y WFS 
mapajs = M.map({
  "container": "map",
  "projection": "EPSG:4326*d",
  "wmcfile": ["callejero"],
  "layers": [
    "WFST*CapaWFS*http://clientes.guadaltel.es/desarrollo/geossigc/wfs?*callejero:prueba_pol_wfst*MPOLYGON",
    "WMS*Redes*http://www.ideandalucia.es/wms/mta400v_2008?*Redes_energeticas*true",
    "KML*Arboleda*http://mapea-sigc.juntadeandalucia.es/Componente/kml/*arbda_sing_se.kml*true" 
  ],
  "controls": ["layerswitcher", "mouse", "scale", "overviewmap", "panzoombar", "scaleline"],
}).addPlugin(new M.plugin.AttributeTable());

// PRUEBA 1
// Añade capa GeoJSON que viene por defecto en 23030 (ver fuente)
var capaGeoJSON = new M.layer.GeoJSON({
  "url": 'http://clientes.guadaltel.es/desarrollo/geossigc/callejero/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=callejero:da_provincia&maxFeatures=50&outputFormat=application/json',
  "name": 'da_provincia'
});
mapajs.addLayers([capaGeoJSON]);


// PRUEBA 2
// Añade GeoJSON en 23030 por source

capaGeoJSON2 = new M.layer.GeoJSON({
  source: {
    "type": "FeatureCollection",
    "totalFeatures": 2,
    "features": [
      {
        "type": "Feature",
        "id": "prueba_pol_wfst.2185",
        "geometry": {
          "type": "MultiPolygon",
          "coordinates": [
                           [
                              [
                                 [
                                    217889.86083175,
                                    4172234.1060741
                                 ],
                                 [
                                    310587.57273963,
                                    4170762.7138216
                                 ],
                                 [
                                    267426.73333279,
                                    4066784.3279778
                                 ],
                                 [
                          ...