mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
182 lines
5.6 KiB
HTML
182 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- --------------------------------------------------------
|
|
|
|
Copyright (c) 2015-2018 Jean-Marc VIGLINO,
|
|
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
|
|
|
---------------------------------------------------------- -->
|
|
<title>ol-ext: style chart</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<meta name="description" content="ol.style.Chart is an image style to draw statistical graphics (bar or pie charts) on a map." />
|
|
<meta name="keywords" content="ol3, style, vector, statistic, chart, pie, animation" />
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
|
|
<!-- Openlayers -->
|
|
<link rel="stylesheet" href="https://openlayers.org/en/master/css/ol.css" />
|
|
<script type="text/javascript" src="https://openlayers.org/en/master/build/ol.js"></script>
|
|
|
|
<!-- ol-ext -->
|
|
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol3-ext"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
|
|
|
<a href="../../index.html">
|
|
<h1>ol-ext: style chart</h1>
|
|
</a>
|
|
<p class="info">
|
|
The <i>ol.style.Chart</i> is an image style to draw statistical graphics (bar or pie charts) on a map.
|
|
<br/>
|
|
</p>
|
|
|
|
<!-- DIV pour la carte -->
|
|
<div id="map" style="width:600px; height:400px;"></div>
|
|
<div class="options">
|
|
<h2>Options:</h2>
|
|
Chart type: <select id="graph" onchange="doAnimate();">
|
|
<option value="pie">pie</option>
|
|
<option value="pie3D">pie3D</option>
|
|
<option value="donut">donut</option>
|
|
<option value="bar">bar</option>
|
|
</select>
|
|
<br/>
|
|
Colors scheme:
|
|
<select id="color" onchange="vector.changed()">
|
|
<option value="classic">Classic</option>
|
|
<option value="dark">Dark</option>
|
|
<option value="pale">Pale</option>
|
|
<option value="pastel">Pastel</option>
|
|
<option value="neon">Neon</option>
|
|
<option value="red,green,blue,magenta">Custom</option>
|
|
</select>
|
|
<br/>
|
|
<button onclick="doAnimate();">Animate!</button>
|
|
</div>
|
|
<div id="select" class="info">No selection</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
// Layers
|
|
var layer = new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'watercolor' }) });
|
|
|
|
// The map
|
|
var map = new ol.Map
|
|
({ target: 'map',
|
|
view: new ol.View
|
|
({ zoom: 6,
|
|
center: [166326, 5992663]
|
|
}),
|
|
layers: [layer]
|
|
});
|
|
|
|
// ol.style.Chart
|
|
var animation=false;
|
|
var styleCache={};
|
|
|
|
function getFeatureStyle (feature, sel)
|
|
{ var k = $("#graph").val()+"-"+ $("#color").val()+"-"+(sel?"1-":"")+feature.get("data");
|
|
var style = styleCache[k];
|
|
if (!style)
|
|
{ var radius = 15;
|
|
// area proportional to data size: s=PI*r^2
|
|
if ($("#graph").val()!="bar")
|
|
{ radius = 8* Math.sqrt (feature.get("size") / Math.PI);
|
|
}
|
|
// Create chart style
|
|
var c = $("#color").val();
|
|
styleCache[k] = style = new ol.style.Style(
|
|
{ image: new ol.style.Chart(
|
|
{ type: $("#graph").val(),
|
|
radius: (sel?1.2:1)*radius,
|
|
offsetY: $("#graph").val()=='pie' ? 0 : (sel?-1.2:-1)*feature.get("radius"),
|
|
data: feature.get("data") || [10,30,20],
|
|
colors: /,/.test(c) ? c.split(",") : c,
|
|
rotateWithView: true,
|
|
animation: animation,
|
|
stroke: new ol.style.Stroke(
|
|
{ color: $("#color").val()!="neon" ? "#fff":"#000",
|
|
width: 2
|
|
}),
|
|
})
|
|
});
|
|
}
|
|
style.getImage().setAnimation(animation);
|
|
return [style];
|
|
}
|
|
|
|
// 30 random features with data: array of 4 values
|
|
var ext = map.getView().calculateExtent(map.getSize());
|
|
var features=[];
|
|
for (var i=0; i<30; ++i)
|
|
{ var n, nb=0, data=[];
|
|
for (var k=0; k<4; k++)
|
|
{ n = Math.round(8*Math.random());
|
|
data.push(n);
|
|
nb += n;
|
|
}
|
|
features[i] = new ol.Feature(
|
|
{ geometry: new ol.geom.Point([ext[0]+(ext[2]-ext[0])*Math.random(), ext[1]+(ext[3]-ext[1])*Math.random()]),
|
|
data: data,
|
|
size: nb
|
|
});
|
|
}
|
|
var vector = new ol.layer.Vector(
|
|
{ name: 'Vecteur',
|
|
source: new ol.source.Vector({ features: features }),
|
|
// y ordering
|
|
renderOrder: ol.ordering.yOrdering(),
|
|
style: function(f) { return getFeatureStyle(f); }
|
|
})
|
|
|
|
map.addLayer(vector);
|
|
|
|
// Control Select
|
|
var select = new ol.interaction.Select({
|
|
style: function(f) { return getFeatureStyle(f, true); }
|
|
});
|
|
map.addInteraction(select);
|
|
|
|
select.getFeatures().on(['add','remove'], function(e)
|
|
{ if (e.type=="add") $("#select").html("Selection data: "+e.element.get("data").toString());
|
|
else $("#select").html("No selection");
|
|
})
|
|
|
|
// Animate function
|
|
var listenerKey;
|
|
function doAnimate()
|
|
{ if (listenerKey) return;
|
|
var start = new Date().getTime();
|
|
var duration = 1000;
|
|
animation = 0;
|
|
listenerKey = vector.on('precompose', function(event)
|
|
{ var frameState = event.frameState;
|
|
var elapsed = frameState.time - start;
|
|
if (elapsed > duration)
|
|
{ ol.Observable.unByKey(listenerKey);
|
|
listenerKey = null;
|
|
animation = false;
|
|
}
|
|
else
|
|
{ animation = ol.easing.easeOut (elapsed / duration);
|
|
frameState.animate = true;
|
|
}
|
|
vector.changed();
|
|
});
|
|
// Force redraw
|
|
vector.changed();
|
|
//map.renderSync();
|
|
}
|
|
|
|
doAnimate();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |