Clic con capa clusterizada
Al clicar sobre una capa, para mostrar un popup por ejemplo, borra la feature del mapa sobre la que se ha clicado cuando hay capa clusterizada
by Francisco
HTML
<link rel="stylesheet" href="http://publicacion.i-administracion.junta-andalucia.es/mapea/assets/css/mapea-5.0.1.ol.min.css">
<script src="http://publicacion.i-administracion.junta-andalucia.es/mapea/js/mapea-5.0.1.ol.min.js"></script>
<script src="http://publicacion.i-administracion.junta-andalucia.es/mapea/js/configuration-5.0.1.js"></script>
<button id="categoria" onclick="setStyleCat()">
Categoría
</button>
<button id="cluster" onclick="setStyleCluster()">
Cluster
</button>
<div id="map"></div>
CSS
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
JavaScript
var mapajs = M.map({
'container': 'map',
"controls": ["layerswitcher"]
});
var campamentos = new M.layer.WFS({
name: "Campamentos",
url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/wfs",
namespace: "sepim",
name: "campamentos",
geometry: 'POINT',
extract: true
});
mapajs.addLayers(campamentos);
let reserva_st = new M.style.Polygon({
fill: {
color: 'rgb(223, 115, 255)',
opacity: 0.5
}
});
var reservas = new M.layer.WFS({
name: "reservas_biosfera",
namespace: "reservas_biosfera",
legend: "Reservas biosferas",
geometry: "POLYGON",
url: "https://www.juntadeandalucia.es/medioambiente/mapwms/REDIAM_WFS_Patrimonio_Natural?",
version: "1.1.0"
}, {
getFeatureOutputFormat: 'geojson',
describeFeatureTypeOutputFormat: 'geojson'
});
mapajs.addLayers(reservas);
//mapajs.getFeatureHandler().removeLayer(reservas);
campamentos.on(M.evt.SELECT_FEATURES, function(features, evt) {
if (features[0] instanceof M.ClusteredFeature) {
console.log('Es un cluster:', features[0].getAttribute('features'));
} else {
console.log('NO es un cluster:', features);
}
});
//Estilos para categorización
let primera = new M.style.Point({
icon: {
src: 'https://image.flaticon.com/icons/svg/34/34697.svg',
scale: 0.1
},
});
let segunda = new M.style.Point({
icon: {
src: 'https://image.flaticon.com/icons/svg/34/34651.svg',
scale: 0.1
},
});
let tercera = new M.style.Point({
icon: {
src: 'https://image.flaticon.com/icons/svg/34/34654.svg',
scale: 0.1
},
});
let categoryStyle = new M.style.Category("categoria", {
"Primera": primera,
"Segunda": segunda,
"Tercera": tercera
});
//Estilo para cluster
let clusterOptions = {
ranges: [{
...