mirror of
https://github.com/Viglino/ol-ext.git
synced 2025-12-08 19:26:29 +00:00
304 lines
8.8 KiB
HTML
304 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--
|
|
Copyright (c) 2017-2018 Jean-Marc VIGLINO,
|
|
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
|
-->
|
|
<title>ol-ext: FeatureBin source</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<meta name="description" content="ol.source.HexBin is a source to display hexagonal binning on a map." />
|
|
<meta name="keywords" content="ol3, layer, hexbin, cluster, hexagon, binning, heatmap" />
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
|
|
<!-- FontAwesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<!-- 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>
|
|
|
|
|
|
<!-- ol-ext -->
|
|
<link rel="stylesheet" href="../../dist/ol-ext.css" />
|
|
<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>
|
|
|
|
<!-- filesaver-js -->
|
|
<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>
|
|
|
|
<!-- Proj4 -->
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
|
|
<style>
|
|
#map {
|
|
width: 600px;
|
|
height: 400px;
|
|
}
|
|
.fullscreen #map {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.fullscreen .options {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.fullscreen .info:last-child,
|
|
.fullscreen #legend {
|
|
display: none;
|
|
}
|
|
.waiting {
|
|
opacity: .5;
|
|
}
|
|
.waiting:before {
|
|
content: "Calculating...";
|
|
background: #fff;
|
|
padding: 1em;
|
|
font-size: 2em;
|
|
top: 30%;
|
|
left: 50%;
|
|
position: fixed;
|
|
transform: translate(-50%,-30%);
|
|
z-index: 999;
|
|
box-shadow: 1px 1px 2px 2px;
|
|
}
|
|
.fa-arrows-alt {
|
|
float: right;
|
|
cursor: pointer;
|
|
}
|
|
button {
|
|
font-size: 1em;
|
|
color: #fff;
|
|
background: #369;
|
|
border: 0;
|
|
padding: .2em 1em;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
|
|
|
<a href="../../index.html">
|
|
<h1>ol-ext: FeatureBin source</h1>
|
|
</a>
|
|
|
|
<div class="info">
|
|
The <i>ol.source.FeatureBin</i> is a source that use a set of features subdivision
|
|
to bin data on it.
|
|
</div>
|
|
|
|
<!-- Map DIV -->
|
|
<div id="map"></div>
|
|
|
|
<div class="options">
|
|
<i class="fa fa-arrows-alt" title="fullscreen" onclick="$('body').toggleClass('fullscreen'); map.updateSize();"></i>
|
|
<h2>Options:</h2>
|
|
<ul>
|
|
<li>
|
|
<div class="info">
|
|
<input id="showsource" type="checkbox" onchange="layerSource.setVisible($(this).prop('checked')); modify.setActive($(this).prop('checked'));" /><label for="showsource">
|
|
Display source features and move them around to see what happens to the bin!
|
|
</label>
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<button onclick='save()'><i class="fa fa-download"></i> download result</button>
|
|
/ <input id="percent" type="number" value="100" onchange="reset();" style="width:5em;" /> hab.
|
|
</li>
|
|
</ul>
|
|
<div class="info">Selection: <span>0</span></div>
|
|
<div class="info">
|
|
<i class="fa fa-upload"></i> Drag'n'drop .geojson to calculate on your data!
|
|
<br/>
|
|
<label>
|
|
<input id="add" type="checkbox" />
|
|
add features when dropped
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// The map
|
|
var map = new ol.Map({
|
|
target: 'map',
|
|
view: new ol.View({
|
|
zoom: 5,
|
|
center: [166326, 5992663]
|
|
}),
|
|
layers: [ new ol.layer.Tile({ source: new ol.source.OSM() })]
|
|
});
|
|
|
|
var select = new ol.interaction.Select();
|
|
map.addInteraction(select);
|
|
select.on('select', function(e){
|
|
if (e.selected.length){
|
|
var f = e.selected[0].get('features');
|
|
if (f) $(".options .info span").text(e.selected[0].get('features').length+' / '+e.selected[0].get('pop')+' hab.');
|
|
else $(".options .info span").text("0");
|
|
}
|
|
else $(".options .info span").text("0");
|
|
});
|
|
|
|
// Create a set of features on seed points
|
|
function addFeatures(nb){
|
|
var ssize = 20; // seed size
|
|
var ext = map.getView().calculateExtent();
|
|
var dx = ext[2]-ext[0];
|
|
var dy = ext[3]-ext[1];
|
|
var dl = Math.min(dx,dy);
|
|
var features=[];
|
|
for (var i=0; i<nb/ssize; ++i){
|
|
var seed = [ext[0]+dx*Math.random(), ext[1]+dy*Math.random()]
|
|
for (var j=0; j<ssize; j++){
|
|
var f = new ol.Feature(new ol.geom.Point([
|
|
seed[0] + dl/10*Math.random(),
|
|
seed[1] + dl/10*Math.random()
|
|
]));
|
|
features.push(f);
|
|
}
|
|
}
|
|
source.clear();
|
|
source.addFeatures(features);
|
|
reset();
|
|
}
|
|
|
|
// Vector source with features to collect
|
|
var source = new ol.source.Vector();
|
|
// Vector source with features collector
|
|
var binSource = new ol.source.Vector({
|
|
/** /
|
|
url: '../data/departements.geojson',
|
|
format: new ol.format.GeoJSON()
|
|
/*/
|
|
url: 'https://macarte.ign.fr/edition/statistique/data/geometry/communes.geojsonx',
|
|
format: new ol.format.GeoJSONX()
|
|
/**/
|
|
});
|
|
// Force source to load
|
|
binSource.loadFeatures(null, null, map.getView().getProjection());
|
|
|
|
// Interaction to move the source features
|
|
var modify = new ol.interaction.Modify({ source: source });
|
|
modify.setActive(false);
|
|
map.addInteraction(modify);
|
|
var layerSource = new ol.layer.Vector({ source: source, visible:false })
|
|
map.addLayer(layerSource);
|
|
|
|
// Style function
|
|
var min, max;
|
|
var styleFn = function(f,res){
|
|
var color;
|
|
if (f.get('features').length > min+2*(max-min)/3) color = [136, 0, 0, .5];
|
|
else if (f.get('features').length > min + (max-min)/3) color = [255, 165, 0, .5];
|
|
else color = [0, 136, 0, .5];
|
|
return [ new ol.style.Style({ fill: new ol.style.Fill({ color: color }) }) ];
|
|
};
|
|
// Feature collector layer
|
|
var collector = new ol.layer.Vector({
|
|
style: styleFn,
|
|
source: new ol.source.FeatureBin({
|
|
// Features to collect
|
|
source: source,
|
|
// Feature to use as collector
|
|
binSource: binSource
|
|
})
|
|
})
|
|
map.addLayer(collector);
|
|
// When features are loaded
|
|
collector.getSource().on('change', function() {
|
|
reset();
|
|
});
|
|
|
|
// add 1000 features
|
|
addFeatures(1000);
|
|
|
|
// Add feature on drop
|
|
var dd = new ol.interaction.DropFile();
|
|
map.addInteraction (dd);
|
|
dd.on('loadstart', function () { $('body').addClass('waiting'); });
|
|
dd.on('loadend', function () { $('body').removeClass('waiting'); });
|
|
dd.on ('addfeatures', function(event) {
|
|
var f = event.features;
|
|
if (!$("#add").prop('checked')) source.clear(true);
|
|
source.addFeatures(f);
|
|
reset();
|
|
});
|
|
|
|
// Create Bin
|
|
function reset() {
|
|
max = 0;
|
|
min = Infinity;
|
|
collector.getSource().getFeatures().forEach(function (f) {
|
|
var nb = f.get('features').length;
|
|
if (nb>max) max = nb;
|
|
if (nb<min) min = nb;
|
|
});
|
|
collector.changed();
|
|
};
|
|
|
|
// Save
|
|
function save (point) {
|
|
var format = new ol.format.GeoJSON();
|
|
var features = collector.getSource().getGridFeatures();
|
|
if (point) {
|
|
features.forEach(function (f) {
|
|
var g = f.getGeometry().getInteriorPoint();
|
|
f.setGeometry(g);
|
|
});
|
|
}
|
|
var data = format.writeFeatures(features, {
|
|
dataProjection: 'EPSG:4326',
|
|
featureProjection: map.getView().getProjection()
|
|
});
|
|
var blob = new Blob([data], {type: "text/plain;charset=utf-8"});
|
|
saveAs(blob, "collector.geojson");
|
|
}
|
|
|
|
// Add population to the collector
|
|
function addPop1km() {
|
|
$('body').addClass('waiting');
|
|
$.ajax('../data/insee_1km.csv', {
|
|
success: function(res){
|
|
res = res.split('\n');
|
|
res.shift();
|
|
collector.getSource().getFeatures().forEach(function(b) { b.set('pop',0); });
|
|
res.forEach(function(data){
|
|
var source = collector.getSource();
|
|
data = data.split(',');
|
|
var coord = [ Number(data[0]*1000)+500, Number(data[1]*1000)+500];
|
|
coord = ol.proj.transform(coord, 'EPSG:3035', map.getView().getProjection());
|
|
var bin = source.getBinAt(coord);
|
|
if (bin) {
|
|
bin.set('pop', (bin.get('pop')||0) + Number(data[2]));
|
|
}
|
|
});
|
|
$('body').removeClass('waiting');
|
|
}
|
|
});
|
|
}
|
|
collector.getSource().setFlatAttributesFn(function (bin, features) {
|
|
var pc = Number($('#percent').val());
|
|
if (bin.get('pop')) {
|
|
bin.set('nb_pop',pc*bin.get('nb')/bin.get('pop'));
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|