mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
314 lines
7.6 KiB
HTML
314 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>ol-ext: We are Data (Watchdogs like)</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<meta name="description" content="Calculate the Delaunay triangulation of a Point vector source." />
|
|
<meta name="keywords" content="ol, openlayers tirangulation, delaunay" />
|
|
|
|
<!-- 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 src="/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></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>
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
|
|
<style>
|
|
#map {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.ol-overlaycontainer-stopevent:before {
|
|
content: "";
|
|
background-image:
|
|
radial-gradient(circle, transparent 20%, rgba(0,0,0,.8) 80%),
|
|
radial-gradient(circle at 33% 33%, rgba(255,255,255,.3), transparent 20%);
|
|
pointer-events: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#map .ol-button > div {
|
|
color: #fff;
|
|
}
|
|
#map .ol-button.ol-active > div {
|
|
color: #0ff;
|
|
}
|
|
</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: We are Data (Watchdogs like)</h1>
|
|
</a>
|
|
<div class="info">
|
|
</div>
|
|
|
|
<!-- Map div -->
|
|
<div id="map"></div>
|
|
|
|
<!--div class="options"></!--div-->
|
|
|
|
<script type="text/javascript">
|
|
|
|
// Base layers
|
|
var carte = new ol.layer.Geoportail({
|
|
layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2'
|
|
//layer: 'ORTHOIMAGERY.ORTHOPHOTOS'
|
|
//layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS'
|
|
});
|
|
/**/
|
|
carte.addFilter(new ol.filter.Colorize({
|
|
operation: 'difference',
|
|
color: [255,192,128]
|
|
//color: [0,0,128]
|
|
}));
|
|
/** /
|
|
carte.addFilter(new ol.filter.Colorize({
|
|
operation: 'grayscale',
|
|
color: [192,192,255]
|
|
}));
|
|
/**/
|
|
|
|
// The map
|
|
var map = new ol.Map ({
|
|
target: 'map',
|
|
view: new ol.View ({
|
|
zoom: 15,
|
|
center: [205461, 5867916]
|
|
}),
|
|
layers: [carte]
|
|
});
|
|
map.addControl(new ol.control.Permalink({ visible: false }));
|
|
|
|
// Default style
|
|
lineStyle = [
|
|
new ol.style.Style({
|
|
stroke: new ol.style.Stroke({
|
|
color: [0,255,255],
|
|
width: 1
|
|
}),
|
|
fill: new ol.style.Fill({ color: [0,255,255,.2] })
|
|
})
|
|
];
|
|
var circleRedStyle = new ol.style.Style({
|
|
image: new ol.style.Circle ({
|
|
radius: 30,
|
|
stroke: new ol.style.Stroke ({ color: [0,255,192], width: 1.5 })
|
|
})
|
|
});
|
|
var styles = {
|
|
hexa: [
|
|
new ol.style.Style({
|
|
image: new ol.style.RegularShape({
|
|
radius: 10,
|
|
points: 6,
|
|
stroke: new ol.style.Stroke({
|
|
color: [0,255,0],
|
|
width: 1.5
|
|
})
|
|
})
|
|
}),
|
|
new ol.style.Style({
|
|
image: new ol.style.RegularShape({
|
|
radius: 5,
|
|
points: 6,
|
|
fill: new ol.style.Fill({
|
|
color: [0,255,0]
|
|
})
|
|
})
|
|
})
|
|
],
|
|
square: [
|
|
new ol.style.Style({
|
|
image: new ol.style.RegularShape({
|
|
radius: 8,
|
|
points: 4,
|
|
angle: Math.PI/4,
|
|
fill: new ol.style.Fill({
|
|
color: [255,192,0]
|
|
})
|
|
})
|
|
}),
|
|
],
|
|
losange: [
|
|
new ol.style.Style({
|
|
image: new ol.style.RegularShape({
|
|
radius: 10,
|
|
points: 4,
|
|
stroke: new ol.style.Stroke({
|
|
color: [255,255,0],
|
|
width: 1.5
|
|
})
|
|
})
|
|
}),
|
|
new ol.style.Style({
|
|
image: new ol.style.RegularShape({
|
|
radius: 5,
|
|
points: 4,
|
|
fill: new ol.style.Fill({
|
|
color: [255,255,0]
|
|
})
|
|
})
|
|
})
|
|
],
|
|
triangle: [
|
|
new ol.style.Style({
|
|
image: new ol.style.RegularShape({
|
|
radius: 12,
|
|
points: 3,
|
|
stroke: new ol.style.Stroke({
|
|
color: [255,0,0],
|
|
width: 1.5
|
|
})
|
|
})
|
|
}),
|
|
new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
radius: 4,
|
|
fill: new ol.style.Fill({
|
|
color: [255,0,0]
|
|
})
|
|
})
|
|
})
|
|
]
|
|
};
|
|
var keys = Object.keys(styles);
|
|
|
|
// Node source
|
|
var nodes = new ol.source.Vector();
|
|
var nb = 0;
|
|
nodes.on('addfeature', function(e) {
|
|
e.feature.set('style', keys[Math.floor(Math.random()*keys.length)]);
|
|
});
|
|
var vector = new ol.layer.Vector({
|
|
name: 'vector',
|
|
source: nodes,
|
|
style: function(f) {
|
|
return styles[f.get('style')];
|
|
}
|
|
});
|
|
|
|
// Delaunay source based on the node source
|
|
var delaunay = new ol.source.Delaunay({
|
|
source: nodes
|
|
});
|
|
var triangle = new ol.layer.Vector({
|
|
name: 'triangle',
|
|
source: delaunay,
|
|
style: function() { return lineStyle }
|
|
});
|
|
|
|
// Add to map
|
|
map.addLayer(triangle);
|
|
map.addLayer(vector);
|
|
|
|
// Check adds
|
|
vector.getSource().on('addfeature', function(e) {
|
|
vector.animateFeature (e.feature, new ol.featureAnimation.Zoom({
|
|
duration: 500,
|
|
easing: ol.easing.easeIn
|
|
}));
|
|
var f = new ol.Feature (e.feature.getGeometry().clone());
|
|
f.setStyle(circleRedStyle);
|
|
vector.animateFeature (f, new ol.featureAnimation.ZoomOut({
|
|
fade: ol.easing.easeOut,
|
|
duration: 1500,
|
|
easing: ol.easing.linear
|
|
}));
|
|
});
|
|
triangle.getSource().on('addfeature', function(e) {
|
|
triangle.animateFeature (e.feature, new ol.featureAnimation.Blink({
|
|
nb: 15,
|
|
duration: 2000,
|
|
easing: ol.easing.easeIn
|
|
}));
|
|
});
|
|
|
|
// Control Bar
|
|
var bar = new ol.control.Bar({ toggleOne: true });
|
|
map.addControl(bar);
|
|
|
|
// Draw interaction to add new points
|
|
var draw = new ol.interaction.Draw({ source: nodes, type:"Point" });
|
|
bar.addControl(new ol.control.Toggle({
|
|
className: 'ol-text-button',
|
|
html: "add",
|
|
interaction: draw,
|
|
active: true
|
|
}));
|
|
|
|
// Delete
|
|
var del = new ol.interaction.Select({
|
|
layers: [vector],
|
|
hitTolerance: 5
|
|
});
|
|
del.on('select', function(e){
|
|
var f = e.selected[0];
|
|
if (f) nodes.removeFeature(f);
|
|
del.getFeatures().clear();
|
|
});
|
|
bar.addControl(new ol.control.Toggle({
|
|
className: 'ol-text-button',
|
|
html: "del",
|
|
interaction: del
|
|
}));
|
|
|
|
// Select
|
|
var circle = new ol.layer.Vector({
|
|
name: 'circle',
|
|
source: new ol.source.Vector(),
|
|
// style: redStyle
|
|
});
|
|
map.addLayer(circle);
|
|
|
|
// Show circumcircle on hover
|
|
var hover = new ol.interaction.Hover({
|
|
layers: [triangle]
|
|
});
|
|
hover.on('enter', function(e){
|
|
circle.getSource().clear();
|
|
if (e.layer===triangle) {
|
|
var c = e.feature.getGeometry().getCoordinates()[0];
|
|
c = delaunay.getCircumCircle(c);
|
|
if (c.radius) {
|
|
c = new ol.geom.Circle(c.center, c.radius);
|
|
var f = new ol.Feature(c);
|
|
circle.getSource().addFeature(f);
|
|
}
|
|
}
|
|
});
|
|
hover.on('leave', function(e){
|
|
circle.getSource().clear();
|
|
});
|
|
bar.addControl(new ol.control.Toggle({
|
|
className: 'ol-text-button',
|
|
html: 'circle',
|
|
interaction: hover
|
|
}));
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |