Carte openlayer: afficher plusieurs point a partir d'une bdd
Résolu
maxou_3753 Messages postés 10 Date d'inscription Statut Membre Dernière intervention -
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
- Carte openlayer: afficher plusieurs point a partir d'une bdd
- Carte d'identité - Accueil - Services publics
- Pile carte mere - Guide
- Changer carte graphique - Guide
- Débloquer carte sim sans code puk - Guide
- Mettre des points sur une carte - Guide
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.
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 :
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.
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.
https://www.google.com/search?q=openlayer+mysql
oui mais je n'arrive pas a exporter ma base de données en csv et a ajouter ce fichier avec ceux de mon site.
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;
Si j'ai bien compris ce code n'affiche qu'un seul point non?