mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
216 lines
6.7 KiB
HTML
216 lines
6.7 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://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
|
|
<!--
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@v10.2.0/dist/ol.js"></script>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@v9.2.0/dist/ol.js"></script>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@v8.1.0/dist/ol.js"></script>
|
|
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
|
|
-->
|
|
|
|
|
|
<!-- ol-ext -->
|
|
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
|
|
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
|
|
<script src="https://unpkg.com/elm-pep"></script>
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></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">
|
|
|
|
console.log('ol@' + ol.util.VERSION)
|
|
|
|
// Layers
|
|
var layer = new ol.layer.Geoportail({ layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' })
|
|
|
|
// 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 key = $("#graph").val()
|
|
+"-"+ $("#color").val()
|
|
+"-"+ (sel?"sel":"nsel")
|
|
+"-"+ feature.get("data").join('-');
|
|
var style = styleCache[key];
|
|
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[key] = style = [
|
|
new ol.style.Style({
|
|
image: new ol.style.Chart({
|
|
type: $("#graph").val(),
|
|
radius: (sel?1.2:1)*radius,
|
|
displacement: [
|
|
0,
|
|
$("#graph").val()==='bar' ? (sel?1.2:1)*radius : 0
|
|
],
|
|
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
|
|
}),
|
|
})
|
|
}),
|
|
/*
|
|
new ol.style.Style({
|
|
text: new ol.style.Text({
|
|
text: key,//feature.get("data").join('-'),
|
|
fill: new ol.style.Fill({
|
|
color: '#000'
|
|
})
|
|
})
|
|
}),
|
|
new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
radius: 5,
|
|
stroke: new ol.style.Stroke({ color: '#fff', width: 1.5 }),
|
|
fill: new ol.style.Fill({ color: '#f00' })
|
|
})
|
|
})
|
|
/**/
|
|
];
|
|
}
|
|
style[0].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', 'prerender'], 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> |