[Mapea5] Serialización de estilos
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="filtrar" onclick="copyPointStyle();">
Copiar puntos
</button>
<button id="filtrar" onclick="copyLineStyle();">
Copiar línea
</button>
<button id="filtrar" onclick="copyPolygonStyle();">
Copiar polígono
</button>
<div id="map1"></div>
<div id="map2"></div>
CSS
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#map1,
#map2 {
width: 49vw;
float: left;
}
JavaScript
const mapajs1 = M.map({
container: "map1",
wmcfile: "callejero",
controls: ["layerswitcher"]
});
const mapajs2 = M.map({
container: "map2",
wmcfile: "callejero",
controls: ["layerswitcher"]
});
const polygons = new M.layer.WFS({
url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?",
namespace: "tematicos",
name: "Provincias",
legend: "Provincias",
geometry: 'MPOLYGON'
});
const lines = new M.layer.WFS({
url: "http://www.ideandalucia.es/dea100/wfs?",
name: "dea100:ie03_gasoducto",
legend: "Gasoductos",
geometry: 'MLINE',
extract: true
});
const points = new M.layer.WFS({
url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/ows",
name: "sepim:campamentos",
legend: "Campamentos",
geometry: 'POINT',
extract: true
});
const polygons2 = new M.layer.WFS({
url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/tematicos/ows?",
namespace: "tematicos",
name: "Provincias",
legend: "Provincias",
geometry: 'MPOLYGON'
});
const lines2 = new M.layer.WFS({
url: "http://www.ideandalucia.es/dea100/wfs?",
name: "dea100:ie03_gasoducto",
legend: "Gasoductos",
geometry: 'MLINE',
extract: true
});
const points2 = new M.layer.WFS({
url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/ows",
name: "sepim:campamentos",
legend: "Campamentos",
geometry: 'POINT',
extract: true
});
mapajs1.addLayers([polygons, lines, points]);
mapajs2.addLayers([polygons2, lines2, points2]);
mapajs1.addPlugin(new M.plugin.StyleManager());
M.utils.extends = M.utils.extendsObj;
function copyPolygonStyle() {
const serStyle = polygons.getStyle().serialize();
if (window.confirm(serStyle)) {
polygons2.setStyle(serStyle);
}
}
function copyLineStyle() {
const serStyle = lines.getStyle().serialize();
if (window.confirm(serStyle)) {
lines2.setStyle(serStyle);
}
}
function copyPointStyle() {
const serStyle =...