mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
130 lines
3.6 KiB
HTML
130 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>ol-ext: control Legends</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<meta name="description" content="iconic font and scalable vector icons for OL3" />
|
|
<meta name="keywords" content="ol3, style, vector, font, fontawesome, icon, maki" />
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
<link rel="stylesheet" href="../css/fontmaki.css" />
|
|
<link rel="stylesheet" href="../css/fontmaki2.css" />
|
|
<!-- FontAwesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<!-- 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>
|
|
|
|
|
|
<!-- 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>
|
|
|
|
<!-- ol-ext maki and fontawesome defintions used in fontsymbol -->
|
|
<script type="text/javascript" src="../../dist/extra/FontAwesomeDef.js"></script>
|
|
|
|
<style>
|
|
.ol-legend > canvas {
|
|
float: left;
|
|
}
|
|
.ol-legend > div.ol-legend {
|
|
position: relative;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
|
|
|
<i clas="fa fa-car" style="position: absolute; top: -100px;"></i>
|
|
|
|
<a href="../../index.html">
|
|
<h1>ol-ext: control Legends</h1>
|
|
</a>
|
|
<div class="info">
|
|
The <i>ol/control/Legend</i> computes a legend based on <i>ol/style/Style</i> and draw it on the map.
|
|
<br/>
|
|
This example displays a legend with 2 columns.
|
|
</div>
|
|
|
|
<!-- DIV pour la carte -->
|
|
<div id="map" style="width:600px; height:400px;"></div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
// 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]
|
|
});
|
|
|
|
// Define a new legend
|
|
var legend = new ol.legend.Legend({
|
|
title: 'Legend',
|
|
margin: 5
|
|
});
|
|
var legendCtrl = new ol.control.Legend({
|
|
legend: legend,
|
|
collapsed: false
|
|
});
|
|
map.addControl(legendCtrl);
|
|
//legend.on('select', function(e){ console.log(e) });
|
|
|
|
// Add a new one
|
|
var legend2 = new ol.legend.Legend({
|
|
title: ' ', // no title
|
|
margin: 5
|
|
});
|
|
map.addControl(new ol.control.Legend({
|
|
legend: legend2,
|
|
target: legendCtrl.element
|
|
}));
|
|
|
|
var form = { Trianle:3, Square:4, Pentagon: 5, Hexagon: 6 };
|
|
for (var i in form) {
|
|
legend.addItem({
|
|
title: i,
|
|
typeGeom: 'Point',
|
|
style: new ol.style.Style({
|
|
image: new ol.style.RegularShape({
|
|
points: form[i],
|
|
radius: 15,
|
|
stroke: new ol.style.Stroke({ color: [255,128,0,1 ], width: 1.5 }),
|
|
fill: new ol.style.Fill({ color: [255,255,0,.3 ]})
|
|
})
|
|
})
|
|
});
|
|
legend2.addItem({
|
|
title: i,
|
|
typeGeom: 'Point',
|
|
style: new ol.style.Style({
|
|
image: new ol.style.RegularShape({
|
|
points: form[i],
|
|
radius: 15,
|
|
radius2: 7,
|
|
stroke: new ol.style.Stroke({ color: [0,128,255,1 ], width: 1.5 }),
|
|
fill: new ol.style.Fill({ color: [0,255,255,.3 ]})
|
|
})
|
|
})
|
|
});
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|