Skip to content

Commit

Permalink
Visualisation des parcelles
Browse files Browse the repository at this point in the history
  • Loading branch information
@teymour
teymour committed May 25, 2023
1 parent 841266e commit 6cc913b
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 15 deletions.
107 changes: 92 additions & 15 deletions carte.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
<!doctype html>
<!-- ####### PLEASE KEEP ####### -->
<!--[if lte IE 6 ]><html class="no-js ie6 ielt7 ielt8 ielt9" lang="fr"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie7 ielt8 ielt9" lang="fr"><![endif]-->
<!--[if IE 8 ]><html class="no-js ie8 ielt9" lang="fr"><![endif]-->
<!--[if IE 9 ]><html class="no-js ie9" lang="fr"><![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="fr"><!--<![endif]-->
<!-- ####### PLEASE KEEP ####### -->
<html class="no-js" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-Ua-Compatible" content="IE=edge" />
Expand All @@ -16,17 +9,29 @@
<script type="text/javascript" src="web/js/lib/leaflet/leaflet.js"></script>
<script type="text/javascript" src="web/js/lib/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="web/js/colors.js"></script>
<script type="text/javascript" src="web/js/bootstrap.bundle.5.3.0-alpha3.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="web/css/bootstrap.5.3.0-alpha3.min.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="web/js/lib/leaflet/leaflet.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="web/js/lib/leaflet/marker.css"/>
</head>
<body role="document">
<div class="container">
<h1>Dénomination AOC sur la commune <span id="commune_nom"></span></h1>
<div class="row">
<div id="loader">
<pre id="loadermessage"></pre>
</div>
<div id="pagecontainer">
<div id="map" class="col-12" style="height:800px; width:1200px; margin-bottom: 20px;">
<div id="pagecontainer" class="col-8">
<h2>La carte</h2>
<div id="map" style="height:800px; width:100%; margin-bottom: 20px;">
</div>
</div>
<div class="col">
<h2>Les parcelles</h2>
<ul id="list_parcelles" style="max-height: 800px; overflow-x: scroll">
</ul>
</div>
</div>
<div>
<h2>Téléchargement</h2>
Expand All @@ -45,9 +50,11 @@ <h2>Téléchargement</h2>
var dep = communes[0].substring(0, 2);
var denomid = searchParams.get('denomid');
var base_opendata = 'https://data.opendatawine.fr';
var my_features = [];
var map;
(function() {
$('#loadermessage').html("Prépartion de la carte");
var map = L.map('map', {center:[47.1113,2.6038],zoom:7});
$('#loadermessage').html("Préparation de la carte");
map = L.map('map', {center:[47.1113,2.6038],zoom:7});
L.tileLayer('https://wxs.ign.fr/{ignApiKey}/geoportail/wmts?'+
'&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&TILEMATRIXSET=PM'+
'&LAYER={ignLayer}&STYLE={style}&FORMAT={format}'+
Expand All @@ -65,7 +72,7 @@ <h2>Téléchargement</h2>
'Imagery © <a href="https://www.ign.fr/">IGN</a>',
id: 'mapbox.light'
}).addTo(map);

var layers = {};
var downloads = {};
async function loadFeatures() {
Expand All @@ -88,7 +95,7 @@ <h2>Téléchargement</h2>
htmlname = '<span style="display:inline-block;width:25px;opacity:0.75;background-color:'+colors[i]+'"> &nbsp; </span> '+nom;
geojson = await geojson_content.json();
mycommune = geojson.features[0].properties.nomcom;
downloads["Délimination de "+nom+" - "+mycommune] = geojson_content.url;
downloads["Délimitation de "+nom+" - "+mycommune] = geojson_content.url;
layers[htmlname] = L.geoJSON(geojson,{style:{fillColor:colors[i],weight:0,opacity:0.75,dashArray:'5',color:'black',fillOpacity:0.4}});
if (!denomid || denomid == current_denomid) {
layers[htmlname].addTo(map);
Expand All @@ -109,13 +116,14 @@ <h2>Téléchargement</h2>
parcelle_nom = '<span style="display:inline-block;width:23px;border:1px solid black;opacity:0.75;"> &nbsp; </span> Parcelles cadastrales - '+mycommune;
layers[parcelle_nom] = L.geoJSON(await cadastreaccess.json(),{style:{weight:1,opacity:0.75,color:'black'}});
layers[parcelle_nom].addTo(map);
displayParcellesList(layers[parcelle_nom].getLayers());
$('#loadermessage').html("Récupération du cadastre de "+commune+" terminée");
}
$('#loadermessage').html("");
$('#commune_nom').html(noms_communes.join(', '));

map.fitBounds(bounds);

L.control.layers({},layers,{position:'bottomleft',collapsed:false}).addTo(map);
let html_download = '<ul>';
for(id in downloads){
Expand All @@ -125,7 +133,76 @@ <h2>Téléchargement</h2>
$('#download_list').html(html_download);
}
loadFeatures();

function displayParcellesList(features) {
features.sort(function (feature1, feature2) { return feature1.feature.properties['id'] > feature2.feature.properties['id'] }).forEach(function(feature) {
properties = feature.feature.properties;
parcelle_id = properties["id"];
parcelle_title = '';
if (properties['prefixe'] != '000') {
parcelle_title = properties['prefixe']+'&nbsp;';
}
parcelle_title += properties['section']+'&nbsp;'+properties['numero']
content = '<h3>'+parcelle_title+'</h3>';
content += '<ul>';
contenance = '';
for(var i in properties) {
if (i == 'contenance') {
properties[i] = parseFloat(properties[i] / 1000).toFixed(4)+' hl';
contenance = properties[i];
}else if (i == 'id') {
properties[i] = '<a href="#'+properties[i]+'">'+properties[i]+'</a>';
}
content += "<li>"+i+" : "+properties[i]+"</span></li>";
}
content += '</ul>';
feature.bindPopup(content);
my_features[parcelle_id] = feature;
$('#list_parcelles').append('<li id="'+parcelle_id+'" data-iud="'+parcelle_id+'" class="parcelle"><span style="min-width: 50px;display:inline-block;"><a href="#'+parcelle_id+'" onclick="openParcelle($(this).parent().parent()[0].dataset.iud);">'+parcelle_title+'</a> : </span><span class="text-right" style="width: 100px;display: inline-block;text-align: right;">'+contenance+'</span></li>')

map.addLayer( new L.Marker(
feature.getBounds().getCenter(),
{
title: "MyLocation",
icon: L.divIcon( iconOptions = {
iconSize : [15, 15],
className : 'parcellelabel',
html: '<b>' + parcelle_title + '</b>'
})
}
)
);
$('.parcellelabel').hide();
});
$('.parcellelabel').hide();

console.log(window.location.hash);
if (window.location.hash) {
openParcelle(window.location.hash.substring(1));
}
map.on('zoomend', function() {
if (map.getZoom() > 16){
$('.parcellelabel').show();
} else {
$('.parcellelabel').hide();
}
});
}
})();
var current_parcelle = null;
function openParcelle(uid) {
if (!uid || !my_features[uid]) {
return;
}
map.fitBounds(my_features[uid].getBounds());
if (current_parcelle) {
current_parcelle.setStyle({'color': 'black', 'weight': '1'});//, 'stroke-opacity': '0.75', 'stroke-width': '1'});
}
current_parcelle = my_features[uid];
current_parcelle.setStyle({'color': 'red', 'fillColor': 'black', 'weight': '2'});//, 'stroke-opacity': '1', 'stroke-width': '2'});
my_features[uid].openPopup();
return false;
}
</script>
</body>
</html>
6 changes: 6 additions & 0 deletions web/css/bootstrap.5.3.0-alpha3.min.css
View file

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions web/js/bootstrap.bundle.5.3.0-alpha3.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 6cc913b

Please sign in to comment.