Buenas estoy trabajando con poligonos cargados en una base de postgis y se me presento un problema para cargarlos en un mapa para que aparescan con sus atributos subo el codigo.
En este codigo php logre rescatar los poligonos en php con un echo me aparecen los poliginos sin problema pero cuando trato de subirlos al mapa para que sean visibles con sus atributos no obtengo ninguna respuesta:
<?php
// Conectarse a la base de datos PostGIS
$db = new PDO("pgsql:host=localhost;dbname=datos", "postgres", "admin");
// Obtener los datos geoespaciales de la tabla
$sql = "SELECT gid, dn, ST_AsGeoJSON(geom) AS geom FROM santacruz where gid <= 10";
$rows = $db->query($sql);
$features = array();
foreach ($rows as $row) {
$feature = array(
'type' => 'Feature',
'properties' => array(
'gid' => $row['gid'],
'dn' => $row['dn']
),
'geom' => json_decode($row['geom'])
);
array_push($features, $feature);
echo $row['geom'];
echo "<br>";
echo "<br>";
}
$geojson = array(
'type' => 'FeatureCollection',
'features' => $features
);
?>
Este es el html que utilizo para carga el mapa con el script que deberia subir los poligonos pero talves estoy en un error o se me escapo algo por que no logro generar los poligonos en el mapa, la idea en si es generar los poligonos con sus atributos para poder mostralos:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="css/leaflet.css">
<link rel="stylesheet" href="css/qgis2web.css"><link rel="stylesheet" href="css/fontawesome-all.min.css">
<style>
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<title>Mapa Leaflet con PostGIS y PHP</title>
</head>
<body>
<div id="map"></div>
<script src="js/qgis2web_expressions.js"></script>
<script src="js/leaflet.js"></script>
<script src="js/leaflet.rotatedMarker.js"></script>
<script src="js/leaflet.pattern.js"></script>
<script src="js/leaflet-hash.js"></script>
<script src="js/Autolinker.min.js"></script>
<script src="js/rbush.min.js"></script>
<script src="js/labelgun.min.js"></script>
<script src="js/labels.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.postgislayer/dist/leaflet.postgislayer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<script>
var map = L.map('map').setView([-17.781800, -63.180502], 13);
L.tileLayer('https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', {
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a>
contributors',
maxZoom: 18
}).addTo(map);
var geojsonLayer = L.geoJson(geojson, {
onEachFeature: function(feature, layer) {
var popupContent = "";
for (var property in feature.properties) {
popupContent += property + ": " + feature.properties[property] + "<br />";
}
layer.bindPopup(popupContent);
}
}).addTo(map);
</script>
</body>
</html>
Talves estoy cargando mal el script porque no sube los poligonos rescatados al mapa, si alguien alguna ves hizo este tipo de poligonos una ayuda me vendria bien estaria muy agradecido. Gracias