如何从MySQL数据库中提取GeoJSON并将其显示在使用传单创建的地图中

所以我一直在尝试练习传单库，我实现了一个系统，可以在地图上制作多边形，并将它们保存在MySQL数据库(如GeoJSON(的表中，但现在我想把我制作的所有多边形都显示在地图上，但我不知道。

这是一个显示地图的PHP文件的代码，我想添加到目前为止我制作的多边形，以便在地图上可视化它们。

<!DOCTYPE html>
<html>
<head>
<script src="leaflet-src.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="leaflet.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div id="map" style="width: 100hw; height: 90vh; border: 1px solid #ccc"></div>    
<script>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
map = new L.Map('map', { center: new L.LatLng(4.639386, -74.082412), zoom: 6 }),
drawnItems = L.featureGroup().addTo(map);
L.control.layers({
'osm': osm.addTo(map),
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
attribution: 'google'
})
}, { 'Pedidos': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
</script>
</body>
</html>

所以我真的不知道该如何或从哪里开始，这个表有两列，一列名为"geojson"，它位于geojson中，另一列有一个id，我是一个noob，但我一直在努力做到这一点，所以如果有人能给我一个提示，我将不胜感激。

更新

我解决了它，我把它添加到PHP文件中的脚本中。

<script>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
map = new L.Map('map', { center: new L.LatLng(4.639386, -74.082412), zoom: 6 }),
drawnItems = L.featureGroup().addTo(map);
L.control.layers({
'osm': osm.addTo(map),
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
attribution: 'google'
})
}, { 'Pedidos': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
<?php
$sql="SELECT geojson FROM poligono WHERE ent = '$entidad'";
$dat = mysqli_query($conn, $sql);
while($consulta = mysqli_fetch_array($dat))
{
$poligono = $consulta['geojson'];
?>L.geoJSON(<?php echo $poligono;?>).addTo(map);<?php
}
?></script>

您必须在将地图添加到页面后添加它，如上图所示。

<?php
$sql="SELECT geojson FROM poligono WHERE ent ='$entidad'";
$dat = mysqli_query($conn, $sql);
while($consulta = mysqli_fetch_array($dat))
{
$poligono = $consulta['geojson'];
?>L.geoJSON(<?php echo $poligono;?>).addTo(map);<?php
}
?>

记得改变"$sql"；指向geojson所在的方向$consulta['geojson']"；geojson所在列的名称，而不是"geojson"。

相关内容

最新更新

热门标签：