2f:T8a4,// La carte map = { // Création du

conteneur de la carte let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); // Rendu du conteneur pour qu'il se dimensionne avant que Leaflet ne dessine la carte yield container; // Création de la carte avec une couche OSM issue de MapBox (token privé limité) // Coordonnées du centre let map = L.map(container).setView([centreLatitude, centreLongitude], 10); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); let wmsLayer = L.tileLayer.wms("https://www.geotests.net/geoserver/mclouet/wms", { layers: 'mclouet:carte_essences_lvl3_8b', format: 'image/png', transparent: true, version: '1.1.0', attribution: "Matthieu Clouet" }).addTo(map); // Construction de l'URL pour la requête GetLegendGraphic let legendUrl = "https://www.geotests.net/geoserver/mclouet/wms?service=WMS&version=1.1.0&request=GetLegendGraphic&layer=mclouet:carte_essences_lvl3_8b&format=image/png&sld_version=1.1.0"; // Création d'un élément

pour la légende et ajout à la carte let legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'); div.innerHTML += ' legend

'; return div; }; legend.addTo(map); // Création de la flèche nord let northControl = L.control({position: 'topright'}); northControl.onAdd = function(map) { var div = L.DomUtil.create('div', 'info north'); div.innerHTML = '

'; return div; }; // Ajout du contrôle de la flèche nord à la carte northControl.addTo(map); // Ajout de l'echelle let scale = L.control.scale({ maxWidth: 200, // Largeur maximale de l'échelle en pixels metric: true, // Pour afficher l'échelle métrique (kilomètres, mètres) imperial: false // Pour afficher l'échelle impériale (miles, pieds) }).addTo(map); }30:[] 2d:{"title":"Webmapping","cells":[{"id":0,"value":"# Webmapping","pinned":false,"hidden":false,"mode":"md"},{"id":344,"value":"

La carte ci-dessous a été représentée dans le cadre d'un projet du Master de géomatique Sigma à l'Université Jean Jaures de Toulouse. Ce projet de Télédétection utilise des images de Sentinel2 et de donnée de la BD Forêt® version 2.0

\n\n

La BD Forêt® version 2.0 est une base de données de référence pour l’espace forestier et les milieux semi-naturels. Elle constitue le référentiel géographique de description des essences forestières.

\n\n

L'objectif de ce projet était d'étudier si la BD Forêt® version 2.0 peut être utilisée comme source d'échantillons de référence pour réaliser une classification supervisée de séries temporelles d'images Sentinel 2. La carte ci-dessous est le résultat de la détection des essences par un modèle RandomForest programmé par des étudiants.

\n","pinned":false,"hidden":false,"mode":"md"},{"id":244,"value":"### Carte des essences forestières aux alentours de Toulouse","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"Inspiré de : https://observablehq.com/@mbostock/hello-openlayers,\n https://observablehq.com/@mbostock/hello-openlayers-select,\n https://observablehq.com/@tburleigh/openlayers-inverted-vector-layer,\n et https://observablehq.com/@upuli24/human-trafficking-around-the-globe-2002-2018","pinned":false,"hidden":false,"mode":"md"},{"id":326,"value":"## Variables utilisées pour la conception de la carte","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"### Ajout de Style CSS pour l'echelle","pinned":false,"hidden":false,"mode":"md"},{"id":292,"value":"html``\n","pinned":false,"hidden":false,"mode":"html"},{"id":341,"value":"### Variables pour le centrage de la carte : \n#### Obtenir la bonne valeur des latitudes/longitude avec la bonne projection","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"centreLongitude = (0.8 + 1.8892735757746446) / 2;","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"centreLatitude = (43.23734662952186 + 43.923401643676954) / 2;","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"### Importation de Leaflet","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"L = require('leaflet@1.2.0');","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"w = (L, require('leaflet-wfst').catch(() => L.wfst))","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}