mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
183 lines
6.0 KiB
HTML
183 lines
6.0 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: AOC viticoles</title>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
||
<meta name="description" content="AOC viticoles" />
|
||
<meta name="keywords" content="ol, openlayers, layer, source, geoportail, vignes" />
|
||
|
||
<!-- jQuery -->
|
||
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
|
||
|
||
<!-- Openlayers -->
|
||
<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css" />
|
||
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/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>
|
||
|
||
|
||
<link rel="stylesheet" href="../style.css" />
|
||
<style>
|
||
#map {
|
||
position: fixed;
|
||
top: 8em;
|
||
left: .5em;
|
||
bottom: .5em;
|
||
right: .5em;
|
||
margin: 0;
|
||
}
|
||
.ol-popup.ol-fixed {
|
||
z-index: 12;
|
||
}
|
||
p {
|
||
margin: 0;
|
||
}
|
||
.info img {
|
||
height: 2em;
|
||
vertical-align: middle;
|
||
}
|
||
</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: AOC viticoles</h1>
|
||
</a>
|
||
<div class="info">
|
||
<p>
|
||
Click on the map to get info.
|
||
<a href="https://geoservices.ign.fr/services-web-experts-parcellaire" target="_new">
|
||
© Geoservice IGN
|
||
<img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Logo-licence-ouverte2.svg"/>
|
||
</a>
|
||
</p>
|
||
</div>
|
||
|
||
<!-- DIV pour la carte -->
|
||
<div id="map"></div>
|
||
|
||
<script type="text/javascript">
|
||
// Key Capabilities
|
||
ol.layer.Geoportail.register("Aire-Parcellaire", {"layer":"Aire-Parcellaire","theme":"parcellaire","desc":"Selon les règlements européens n°110/2008 du 15 janvier 2008, n°1151/2012 du 21 novembre 2012 et n°1308/2013 de l’OCM , le cahier des charges des appellations définit l’aire géographique. Le terme de « délimitation parcellaire » désigne une aire qui repose sur les limites administratives du cadastre (les parcelles) et dont le maillage suffisamment fin permet de tenir compte de variations très localisées des éléments du milieu physique. Elle correspond à l'aire de production de la matière première. Elle est incluse dans l'aire géographique. Données produites par l'Institut National des Origines et la Qualité (INAO)","server":"https://data.geopf.fr/wmts","bbox":[-5.15047,41.3252,9.57054,51.0991],"format":"image/png","minZoom":0,"maxZoom":18,"originators":{"Geoservices":{"attribution":"Géoservices","href":"https://geoservices.ign.fr/"}},"queryable":true,"style":"normal","tilematrix":"PM","title":"Délimitation parcellaire AOC viticole"});
|
||
// The map
|
||
var map = new ol.Map ({
|
||
target: 'map',
|
||
view: new ol.View ({
|
||
zoom: 6,
|
||
center: [261204, 6000000],
|
||
/*
|
||
center: [9.48, 42.738038240088095],
|
||
projection: 'EPSG:4326'
|
||
*/
|
||
})
|
||
});
|
||
|
||
|
||
map.addLayer (new ol.layer.Geoportail('ORTHOIMAGERY.ORTHOPHOTOS', {
|
||
permalink: 'ortho',
|
||
className: 'photo',
|
||
}));
|
||
map.addLayer (new ol.layer.Geoportail({
|
||
layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
|
||
permalink: 'plan',
|
||
className: 'plan',
|
||
visible: true,
|
||
opacity: .5
|
||
}));
|
||
|
||
map.addLayer(new ol.layer.Tile ({
|
||
"title": "Cartes géologiques",
|
||
"extent": [
|
||
-20037508.342789244,
|
||
-238107693.26496765,
|
||
20037508.342789244,
|
||
238107693.26496765
|
||
],
|
||
"visible": false,
|
||
"abstract": "Cartes géologiques",
|
||
"minResolution": 3.1750000000000003,
|
||
"maxResolution": 3527.777777777778,
|
||
"source": new ol.source.TileWMS({
|
||
"url": "http://geoservices.brgm.fr/geologie?language=fre&",
|
||
"projection": "EPSG:3857",
|
||
"attributions": [
|
||
"<a href=\"http://www.brgm.fr/\">© Brgm</a>"
|
||
],
|
||
"crossOrigin": "anonymous",
|
||
"params": {
|
||
"LAYERS": "GEOLOGIE",
|
||
"FORMAT": "image/png",
|
||
"VERSION": "1.3.0"
|
||
}
|
||
})
|
||
}));
|
||
|
||
var vignes = new ol.layer.Geoportail({
|
||
layer: 'Aire-Parcellaire',
|
||
className: 'AOC',
|
||
title: 'Délimitation AOC viticole',
|
||
opacity: .5
|
||
})
|
||
map.addLayer (vignes);
|
||
map.addControl(new ol.control.Permalink({ visible: false }));
|
||
|
||
var vector = new ol.layer.Vector({ title: 'vector', className: 'vector', source: new ol.source.Vector() });
|
||
map.addLayer(vector);
|
||
|
||
map.addControl(new ol.control.ScaleLine());
|
||
map.addControl(new ol.control.LayerSwitcher());
|
||
map.addControl(new ol.control.SearchGeoportail({
|
||
zoomOnSelect: 14
|
||
}));
|
||
|
||
// Show information on click (getFeatureInfo)
|
||
var popup = new ol.Overlay.PopupFeature({
|
||
canFix: true,
|
||
template: {
|
||
attributes: ['id', 'app', 'denom', 'dt', 'type_prod', 'categorie', 'type_denom', 'type_ig', 'insee', 'nomcom', 'insee_2011', 'nomcom_201', 'crinao']
|
||
}
|
||
});
|
||
map.addOverlay(popup);
|
||
map.on('click', function(e) {
|
||
popup.hide();
|
||
map.forEachLayerAtPixel(e.pixel, function(l, pixel) {
|
||
vector.getSource().clear();
|
||
if (l === vignes) {
|
||
// Create new object
|
||
l.getSource().getFeatureInfo(
|
||
e.coordinate,
|
||
map.getView().getResolution(), {
|
||
INFO_FORMAT: 'application/json',
|
||
callback: function(resp) {
|
||
if (resp) {
|
||
resp = JSON.parse(resp);
|
||
if (resp.features[0]) {
|
||
var format = new ol.format.GeoJSON();
|
||
var features = format.readFeatures(resp);
|
||
popup.show(e.coordinate, features);
|
||
vector.getSource().addFeatures(features);
|
||
console.log(resp.features[0].properties);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
);
|
||
}
|
||
return true;
|
||
});
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html> |