CP-090-06 - V4_2_0_DESA_ASSDACIPS_DEMO01
ERR CLUSTER - Demo ASSDA-CIPS. Filtros tipología - clúster
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/yeti/bootstrap.min.css">
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css">
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
<div id="map" class="map"></div>
CSS
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: scroll;
}
JavaScript
// Crate a style instance given feature's properties name and radius.
function computeFeatureStyle(feature) {
return new ol.style.Style({
image: new ol.style.Circle({
radius: feature.get('radius'),
fill: new ol.style.Fill({
color: 'rgba(100,50,200,0.5)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(120,30,100,0.8)',
width: 3
})
}),
text: new ol.style.Text({
font: '12px helvetica,sans-serif',
text: feature.get('name'),
rotation: 360 * rnd * Math.PI / 180,
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
}
// Create random point features
var i, lat, lon, geom, feature, features = [], style, rnd;
for(i=0; i< 200; i++) {
lat = Math.random() * 174 - 87;
lon = Math.random() * 360 - 180;
geom = new ol.geom.Point(
ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857')
);
rnd = Math.random();
feature = new ol.Feature({
geometry: geom,
radius: rnd * 30,
name: 'feature [' + i + ']'
});
features.push(feature);
style = computeFeatureStyle(feature);
feature.setStyle(style);
}
// Source and vector layer
var vectorSource =...