Я хочу отображать долготу и широту из таблицы MySql в Leaflet в виде точек.У меня есть три файла.«Website.html» должен отображать в конце карту Leaflet и некоторую дополнительную информацию.«Karte.php» содержит всю карту Leaflet и включен в website.html.Подключение и экспорт из базы данных Mysql осуществляется в «insert.php».Php уже возвращает файл геоджона, содержащий координаты в виде точек.Я просто не знаю, как добавить геоджон из «insert.php» в «Karte.php».Если я открою HTML, я просто получаю пустой фрейм карты.Без части json_encode обычно отображается базовая карта листовки.
Спасибо
remotesatell
Вывод файла insert.php
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
"13,2172654",
"52,5234718"
]
},
"properties": {
"id": 1,
"Bemerkungen": "",
"age": "b",
"Klettern": "Ja",
"Schaukeln": "Ja",
"Rutschen": "Ja",
"Seilbahn": "Nein",
"Wasserspiel": "Nein",
"HHB": "Ja",
"WD": "Ja",
"BS": "Ja",
"Ballspiel": "Nein",
"Tischtennis": "Nein",
"Sitzmoeglichkeiten": "Ja",
"Bodenbeschaffenheit": "Sand, Beton, Rasen",
"Schatten": "Ja"
}
},
Часть вставки.php
$geojson = array(
'type' => 'FeatureCollection',
'features' => array()
);
# Loop through rows to build feature arrays
while ($row = $rs->fetch(PDO::FETCH_ASSOC)) {
$properties = $row;
# Remove x and y fields from properties (optional)
unset($properties['x']);
unset($properties['y']);
$feature = array(
'type' => 'Feature',
'geometry' => array(
'type' => 'Point',
'coordinates' => array(
$row['x'],
$row['y']
)
),
'properties' => $properties
);
# Add feature arrays to feature collection array
array_push($geojson['features'], $feature);
}
header('Content-type: application/json');
echo json_encode($geojson, JSON_NUMERIC_CHECK);
$conn = NULL;
?>
Karte.php
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
</head>
<body>
<?php include ("insert.php"); ?>
<div id="mapid" style="width: 1920px; height: 1080px;"></div>
<script>
var mymap = L.map('mapid').setView([52.536111,13.203333], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
geojson = <?php json_encode($geojson, JSON_NUMERIC_CHECK); ?>;
var addedGeoJSON = L.geoJSON(geojson, {
style : function(feature) {
return {
color: '#000',
weight: 0.5
}
},
pointToLayer: function(geoJsonPoint, latlng) {
return L.marker(latlng);
},
onEachFeature: function(feature, layer) {
layer.on('dblclick',function(e) {
map.setView(e.latlng,25)
})
}
}).addTo(map);
map.fitBounds(addedGeoJSON.getBounds(), {
padding: [20,20]
});
</script>
</body>
</html>