CP-02-CargarControlesCapasPlugins

Crear mapa con controles y Carga de plugins sobre el mapa

by solcursomapea

HTML

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

<button type="button" onclick="geojson_servido_test()"> Carga GeoJSON Servido Test</button>
            <button type="button" onclick="removeGeojsonServido()"> Eliminar GeoJSON Servido Test</button>
      <button type="button" onclick="kml_test()">Carga KML Test</button>
<button type="button" onclick="removeKML_test()"> removeKML</button>			
<button type="button" onclick="wms_test()">Carga WMS</button>
			<button type="button" onclick="removeWMS_test()"> removeWMS</button>			
      <button type="button" onclick="wfs_test()">Carga WFS</button>
			<button type="button" onclick="removeWFS_test()"> removeWFS</button>			
      <button type="button" onclick="osm_test()">Carga Capa OSM</button>
      <button type="button" onclick="mapbox_test()">Carga Capa Mapbox</button>
            
      <button type="button" onclick="reset_map()"> Reiniciar Mapa </button>
      
      <button type="button" onclick="pluginImpresion()"> Plugin Impresión </button>

CSS

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

JavaScript

// Ejemplo para cargar controles y plugins sobre el mapa
// Controles: "mouse", "panzoombar", "panzoom", "navtoolbar", "layerswitcher", "overviewmap", "scale", "scaleline"
// Plugin: Printer

// Mapea - Personalizar el mapa
// https://github.com/sigcorporativo-ja/Mapea4/wiki/Personalizar-el-mapa

// Controles Básicos
// https://github.com/sigcorporativo-ja/Mapea4/wiki/Controles-b%C3%A1sicos

// EJ1. Crear Mapa con las siguientes características:
// "projection": "EPSG:25830*m",
// center: "228505.76232,4145170.1504",
// Incluir controles - "mouse", "panzoombar", "panzoom", "navtoolbar", "layerswitcher", "overviewmap", "scale", "scaleline"


map = new M.map({
  "container": "map",
  //"layers": ["OSM"],
  "projection": "EPSG:25830*m",
  // "projection": "EPSG:4326*d",
  center: "228505.76232,4145170.1504",
  "zoom": 4,
	controls: ["mouse", "panzoombar", "panzoom", "navtoolbar", "layerswitcher", "overviewmap", "scale", "scaleline"]
});



//=========================================================================
// KML====================================================================
//=========================================================================
// EJ2.Cargar capa KML
// url = http://sad.guadaltel.es/desarrollo/mapea/Componente/kml/arbda_sing_se.kml
// Nombre = Arboleda
function kml_test() {
let kml = new M.layer.KML('KML*Arboleda*http://sigc.desarrollo.guadaltel.es/mapea42_dev/files/kml/*arbda_sing_se.kml*true');
  kml.on(M.evt.SELECT_FEATURES, features => console.log('capa kml', features));
  kml.on(M.evt.UNSELECT_FEATURES, () => console.log('unselect kml'));
  map.addKML(kml);
}

// EJ3.Eliminar capa KML
// Nombre = Arboleda
function removeKML_test(){
  map.removeKML({name: "Arboleda"});
}


//==========================================================================
//CAPAS OSM  y MapBox======================================================
// ========================================================================

// EJ4.Cargar capa OSM
// La...