mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
188 lines
5.3 KiB
HTML
188 lines
5.3 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: scribble style</title>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
||
<meta name="description" content="Openlayers scribble map style" />
|
||
<meta name="keywords" content="ol, vector, style, stroke, fill, scribble, hatch, hatching" />
|
||
|
||
<link rel="stylesheet" href="../style.css" />
|
||
|
||
<!-- 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 -->
|
||
<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>
|
||
|
||
<style>
|
||
#map { background: #f0f0f0; }
|
||
</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: Scribble style</h1>
|
||
</a>
|
||
<div class="info">
|
||
<p>
|
||
The <i>scribbleFill</i> function calculates a MultiPolyline to fill a Polygon
|
||
with a scribble effect.
|
||
<br/>
|
||
You can use it as geometry in a style function to make a map that appear hand-made.
|
||
</p>
|
||
<p>
|
||
Credit: <a href="https://bl.ocks.org/veltman/b2358aaa4716d6fe103f1f8456241ec2">Noah Veltman’s original idea</a>.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Map div -->
|
||
<div id="map" style="width:600px; height:400px;"></div>
|
||
|
||
<div class="options" style="min-width:300px;">
|
||
<h2>Options:</h2>
|
||
<ul>
|
||
<li>
|
||
<label>
|
||
<input type="radio" name="op" value="move" checked="checked" />
|
||
move
|
||
</label>
|
||
<label>
|
||
<input type="radio" name="op" value="drawHole" />
|
||
draw Hole
|
||
</label>
|
||
<label>
|
||
<input type="radio" name="op" value="drawPoly" />
|
||
draw Polygon
|
||
</label>
|
||
<label>
|
||
<input type="radio" name="op" value="modify" />
|
||
modify
|
||
</label>
|
||
</li>
|
||
</ul>
|
||
<button onclick="layer.setVisible(!layer.getVisible());">Show/Hide base map</button>
|
||
<p><i>Refresh to change color / orientation.</i></p>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
|
||
// Layers
|
||
var layer = new ol.layer.Geoportail({ layer: 'ORTHOIMAGERY.ORTHOPHOTOS' });
|
||
|
||
// The map
|
||
var map = new ol.Map({
|
||
target: 'map',
|
||
view: new ol.View
|
||
({ zoom: 3,
|
||
center: [166326, 5992663]
|
||
}),
|
||
layers: [layer]
|
||
});
|
||
|
||
// Vector layer
|
||
var vector = new ol.layer.Vector({
|
||
renderMode: 'image',
|
||
source: new ol.source.Vector({
|
||
url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries.geojson',
|
||
format: new ol.format.GeoJSON()
|
||
}),
|
||
style: scribbleStyle
|
||
})
|
||
map.addLayer(vector);
|
||
|
||
function scribbleStyle(feature, resolution) {
|
||
var colors = ['red','green','blue','cyan','magenta','yellow', 'orange', 'purple', 'GreenYellow'];
|
||
|
||
var a = feature.get('angle') || Math.random() * Math.PI;
|
||
feature.set('angle', a)
|
||
var color = feature.get('color') || colors[Math.round(Math.random()*(colors.length-1))];
|
||
feature.set('color',color)
|
||
// Calculate step according to resolution
|
||
var maxres = 10000;
|
||
var step = Math.max (8*maxres, 8*resolution);
|
||
var width = Math.max (2, 2*maxres/resolution);
|
||
|
||
// cache scribble geom in the feature to prevent calculating
|
||
var scribble = feature._scribble;
|
||
if (!scribble || scribble.step !== step) {
|
||
scribble = {
|
||
step: step,
|
||
geom: ol.geom.scribbleFill(feature.getGeometry(), { interval: step, angle: a }) // feature.getGeometry().scribbleFill({ interval: step, angle: a })
|
||
};
|
||
feature._scribble = scribble;
|
||
// console.log('calculating')
|
||
}
|
||
|
||
return [
|
||
new ol.style.Style({
|
||
stroke: new ol.style.Stroke({
|
||
width: .5,
|
||
color: color//'rgba(255,0,0,.5)'
|
||
}),
|
||
fill: new ol.style.Fill({ color: 'transparent' })
|
||
}),
|
||
new ol.style.Style({
|
||
stroke: new ol.style.Stroke({
|
||
width: width,
|
||
color: color
|
||
}),
|
||
geometry: scribble.geom
|
||
})
|
||
];
|
||
};
|
||
|
||
// interactions
|
||
var interactions = {
|
||
select: new ol.interaction.Select ({hitTolerance : 5}),
|
||
modify: new ol.interaction.Modify ({ source: vector.getSource() }),
|
||
drawHole: new ol.interaction.DrawHole({
|
||
// source: vector.getSource(),
|
||
layers: [vector]
|
||
}),
|
||
drawPoly: new ol.interaction.Draw({
|
||
type: 'Polygon',
|
||
source: vector.getSource()
|
||
})
|
||
}
|
||
for (var i in interactions) map.addInteraction(interactions[i]);
|
||
|
||
interactions.drawHole.on('drawend', function(e){
|
||
e.feature._scribble = null;
|
||
});
|
||
interactions.modify.on('modifyend', function(e){
|
||
for (var i=0, f; f=e.features.item(i); i++) {
|
||
f._scribble = null;
|
||
f.changed();
|
||
}
|
||
});
|
||
|
||
// Activate interaction
|
||
setInteraction = function (n)
|
||
{ //interactions.select.getFeatures().clear();
|
||
var name = typeof(n)==='string' ? n : $('[name="op"]:checked').val();
|
||
for (var i in interactions)
|
||
{ interactions[i].set("active", (i==name));
|
||
}
|
||
}
|
||
setInteraction();
|
||
$("input:radio").on("change",setInteraction);
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |