javascript - Php - 将 MySQL 结果回显为 geojson

Question

我在 MySQL 数据库中有一个表，它有一个几何字段(多边形)

现在我可以查询几何字段并获得这样的 geojson:

SELECT ST_AsGeoJSON(b.shape) FROM `tbl_polygon` as b where ST_Intersects(b.shape, ST_GeomFromText('Polygon((28.0921 -26.11351,28.09210 -26.11288,28.0929502 -26.1128831,28.092950 -26.113510,28.0921027 -26.113510))',1))

在 MySQL 中，我得到了一个 geojson 作为结果:

{"type": "Polygon", "coordinates": [[[28.092521118...

现在这里是我卡住的地方，我有一个 leafletjs map 并想将此 geojson 显示为图层。

那么我如何从外部 php 文件回显 geojson，以便我可以将 geojson 放入我的 javascript 并使用 Leaflet 的 L.geoJSON 添加图层。

我不确定这是否会以这种方式工作。任何建议都会很棒。谢谢，

基于 Majid Abbasi 的出色回答(谢谢)。我试过了，但很明显我遗漏了一些东西，我只是得到一个没有错误的空白页。谢谢马吉德。这是我的 index.php 文件中的代码:

索引.php

<?php
require_once(conn.php);
$myquery = "SELECT ST_AsGeoJSON(b.shape) FROM `tbl_polygon` as b where ST_Intersects(b.shape, ST_GeomFromText('Polygon((28.092102706432343 -26.113510096462498,28.092102706432343 -26.11288390575381,28.092950284481045 -26.11288390575381,28.092950284481045 -26.113510096462498,28.092102706432343 -26.113510096462498))',1))";

$result = mysqli_query($connect, $myquery);?>

<div id="mapid" style="width: 600px; height: 400px;"></div>

var mymap = L.map('mapid').setView([28.092102706432343, -26.113510096462498], 13); 

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);  

var data = <?php echo $result; ?>
 ployLayer = L.geoJson(data).addTo(map);

Answer 1

您需要像这样在您的 PHP 文件中定义一个 JavaScript 变量，并调用创建 map 的 initializeMap 函数并将数据传递给它:

<?php
require_once(conn.php);
$myquery = "SELECT ST_AsGeoJSON(b.shape) as jsonData FROM `tbl_polygon` as b where ST_Intersects(b.shape, ST_GeomFromText('Polygon((28.092102706432343 -26.113510096462498,28.092102706432343 -26.11288390575381,28.092950284481045 -26.11288390575381,28.092950284481045 -26.113510096462498,28.092102706432343 -26.113510096462498))',1))";

$result = mysqli_query($connect, $myquery);
$data = mysqli_fetch_fields(result);
$ST_AsGeoJSON = $data->jsonData;
?>
<script language="javascript">
    var data = <?php echo $ST_AsGeoJSON; ?>;
</script>
var mymap = L.map('mapid').setView([28.092102706432343, -26.113510096462498], 13); 

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap); 
ployLayer = L.geoJson(data).addTo(map);

请注意，您应该在执行此脚本之前运行查询并获取数据并将它们放在 $ST_AsGeoJSON 上。

并且在您的 javascript 中应该有创建 map 的 initializeMap 方法。