Carte openlayer: afficher plusieurs point a partir d'une bdd
Résolu
maxou_3753 Messages postés 11 Statut Membre -
Bonjour,
Je créer une carte sur un site web avec open layer, j'aimerais pouvoir afficher plusieurs point a partir d'une base de donnée Mysql dans laquelle il y as les coordonnée (longitude et latitude).Après avoir fureté sur un multitude de site et de forum sans trouver de réponse qui me correspond.
Voici mon code pour l'instant qui affiche un point:
<?php
$mysqli = new mysqli("mysql-pollucapt.alwaysdata.net", "...", "...",'...');
$result = $mysqli->query("SELECT coord_x FROM coordonnees ORDER BY id DESC LIMIT 1");
$row = $result->fetch_assoc();
$coord_x = floatval($row['coord_x']);
$result = $mysqli->query("SELECT coord_y FROM coordonnees ORDER BY id DESC LIMIT 1");
$row = $result->fetch_assoc();
$coord_y = floatval($row['coord_y']);
$result = $mysqli->query("SELECT niveau FROM coordonnees ORDER BY id DESC LIMIT 1");
$row = $result->fetch_assoc();
$niveau = floatval($row['niveau']);
mysqli_close($mysqli);
?>
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
</head>
<body>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" style="width: 100%; height: 100%px;"></div>
<script>
var attribution = new ol.control.Attribution({
collapsible: false
});
var map = new ol.Map({
controls: ol.control.defaults({attribution: false}).extend([attribution]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [ "Pollucat'" ],
})
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([2.333333, 48.866667]),
maxZoom: 18,
zoom: 12
})
});
</script>
<script type='text/javascript'>
function couleur(a) {
let result;
if (a > 1300) {
result = 'rgba(255, 0, 55, 0.5)';
}
else if (a < 900) {
result = 'rgba(100, 250, 55, 0.5)';
}
else {
result = 'rgba(255, 150, 0, 0.5)';
}
return result;
}
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([<?php echo $coord_x; ?>,<?php echo $coord_y; ?>]))
})
]
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({
color: couleur(<?php echo $niveau; ?>),
})
})
})
});
map.addLayer(layer);
</script>
</body>
</html>
et ici le résultat:
https://pollucapt.alwaysdata.net/carte.php
4 réponses
-
Bonjour
Si tu veux récupérer plusieurs résultats suite à ta requête SQL, il faut commencer par retirer le
LIMIT 1
Ensuite pour pouvoir manipuler le résultat issu de cette requête, il faut utiliser une boucle en PHP.
-
Bonjour,
Merci pour votre réponse mais mon problème vient plutôt d'open layer je ne sait pas comment afficher beaucoup de point.
Ou alors il faudrait que je puisse exporter ma base de donné en csv et que le fichier soit dans les fichier de mon site pour pouvoir l'exploiter.
Cordialement,
Maxou.
-
-
-
Il n'est pas question de CSV .... mais de JSON
OpenLayer, il me semble, permet de charger les données en AJAX... Sinon, tu peux toujours constituer un array contenant les données à afficher via ton code php puis le convertir en json pour pouvoir l'utiliser dans openlayer.
Regarde, par exemple, ce lien : https://topic.alibabacloud.com/a/openlayers-add-point-php-request-mysql-database-to-return-geojson-data_1_41_30047550.html
NB: Le code php proposé utilise l'ancienne extension mysql .. il te faudra le corriger pour utiliser mysqli à la place;
-
-
-
Déjà... merci de poster ton code en utilisant l'icone prévue à cet effet au lieu de mettre des images qu'on ne pourra pas copier/coller pour t'indiquer les erreurs !
Ensuite, regarde la console de ton navigateur ...
Tu verras ceci :
debuguer de l'ajax avec firefox
-
yg_be Messages postés 23437 Date d'inscription Statut Contributeur Dernière intervention Ambassadeur 1 588
bonjour,
quel site utilises-tu pour te former en mysql?
-
je ne sait pas qu'est-ce qu'il faut mettre ici a la place de
-FeatureCollection
-feature
-type
$geojson = array( 'type' => 'FeatureCollection', 'features' => array() );
et ici faut-il changer:
var map = new ol.Map({ layers: [raster, vector], target: ‘map‘, view: new ol.View({ center: [0, 0], zoom: 2 }) });Merci pour ton aide précieuse car ça fait une semaine que je cherche une solution.
