[Mapea5] Estilos por escala

by SIGC GUADALTEL

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>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/plugins/stylemanager/stylemanager.min.css">
<script src="http://mapea4-sigc.juntadeandalucia.es/plugins/stylemanager/stylemanager.ol.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.4.0/chroma.min.js"></script>
<button id="prioridadCapa" onclick="prioridadCapa();" class="vendorbtn" style="left: 60px">1. Capa</button>
    <button id="prioridadWMC" onclick="prioridadWMC();" class="vendorbtn" style="left: 220px">2. WMC y 4. WMC global</button>
    <button id="prioridadMapa" onclick="prioridadMapa();" class="vendorbtn" style="left: 420px">3. Mapa</button>
    <button id="prioridadGetCapabilities" onclick="prioridadGetCapabilities();" class="vendorbtn" style="left: 620px">5. GetCapabilities</button>
    <button id="prioridadProyeccion" onclick="prioridadProyeccion();" class="vendorbtn" style="left: 820px">6. Proyeccion</button>
<div id="map"></div>

CSS

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

#map1,
#map2 {
  width: 49vw;
  float: left;
}

.vendorbtn {
        position: absolute;
        top: 5px;
        z-index: 99999;
        left: 20px;
      }

JavaScript

const mapjs = M.map({
  container: 'map',
  layers: ["OSM"],
  controls: ["mouse", "layerswitcher"]
});

const maxExtent = [193104.52926740074, 4119420.5399687593, 287161.9825899291, 4164759.1717656343];
const wmc = new M.layer.WMC("http://sigc.desarrollo.guadaltel.es/mapea5/files/wmc/wmcprueba.xml*prueba");
const permeabilidad = new M.layer.WMS("http://www.juntadeandalucia.es/medioambiente/mapwms/REDIAM_Permeabilidad_Andalucia?*permeabilidad");
const redesEnergeticas = new M.layer.WMS("WMS*Redes*http://www.ideandalucia.es/wms/mta400v_2008?*Redes_energeticas*true");
const limites = new M.layer.WMS("WMS*Limites*http://www.ideandalucia.es/wms/mta10v_2007?*Limites*true");
const canarias = new M.layer.WMS("WMS*canarias*http://idecan2.grafcan.es/ServicioWMS/MOS?*WMS_MOS*true*false");
const toporaster = new M.layer.WMTS("WMTS*http://www.ideandalucia.es/geowebcache/service/wmts?*toporaster");
const mapbox = new M.layer.Mapbox("MAPBOX*mapbox.streets*true");
const osm = new M.layer.OSM({transparent: true});

const removeLayers = () => mapjs.removeLayers(mapjs.getLayers());

window.prioridadCapa = (evt) => {
  M.dialog.info(`
    Añadimos una WMS con un maxExtent por parámetro.
  `);
  const permeabilidadExtent = new M.layer.WMS({
    url: "http://www.juntadeandalucia.es/medioambiente/mapwms/REDIAM_Permeabilidad_Andalucia?",
    name: "permeabilidad",
    maxExtent
  });
  mapjs.addWMS(permeabilidadExtent);
};

window.prioridadWMC = (evt) => {
  M.dialog.info(`
    Cargamos el WMC de CDAU con el maxExtent global (Andalucía) y con la capa base con un maxExtent específico,
    en este caso, mayor que el global.
  `);
  removeLayers();
  const wmctmp = new M.layer.WMC("http://sigc.desarrollo.guadaltel.es/mapea5/files/wmc/wmcprueba.xml*prueba");
  mapjs.setBbox([74122.81076839779, 4046156.547951491, 454654.1962325135, 4239791.528992346]);
  mapjs.setMaxExtent(undefined);
  mapjs.addWMC(wmctmp);
};
window.prioridadMapa = (evt) => {
  M.dialog.info(`
    3. Parámetro mapa: Si el...