Exemple d'intégration de l'API MNTsurf à une page HTML sous la forme d'un visualiseur cartographique simple intégrant du code JavaScript basé sur la libraire OpenLayers. Un simple click sur la carte lance un calcul de bassin versant.
#Code HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Exemple d'utilisation de l'API MNTSurf en Javascript</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" ></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js"></script>
<script src="https://epsg.io/2154.js"></script&t;
</head>
<body>
<div class="map" id="map" ></div>
<script type="text/javascript">
#Code Javascript
ol.proj.proj4.register(proj4)
var projection = ol.proj.get('EPSG:2154');
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: projection,
center: [174000,6812000],
zoom: 14
})
});
map.on('singleclick', function (evt) {
XY=evt.coordinate
$.ajax({
type: "GET",
dataType: "json",
url: "https://wps.geosas.fr/mntsurf",
data:`service=wps&request=Execute&identifier=xy2watershed&version=1.0.0&datainputs=X=${XY[0]};Y=${XY[1]};epsgOut=epsg:2154;formatOut=GeoJSON&rawdataoutput=bvOut`,
beforeSend:function() {
console.log('start')
},
success: function(data){
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(data),
})
});
map.addLayer(vector);
}
})
})
#Code HTML
</script>
</body>
</html>