Как правильно передать массив PHP в Leatlef Heatmap?

0

Я новичок в PHP и MySQL, поэтому эта задача действительно мешает мне бороться: у меня есть база данных MySQL, которая содержит множество геокоординат, которые должны быть извлечены php, преобразованы в формат JSON, чтобы передать их JavaScript, а затем будут отображаться в листе Тепловая карта.

Я уже написал JS-код, и AJAX, похоже, работает. Но Heatmap, похоже, не принимает мой массив, содержащий координаты. Я не вижу, где я ошибся; Я думаю, что мой массив PHP не отформатирован правильно.

Heatmap должен получить свои данные в таком формате:

var testData = {
  max: 8,
  data: [{lat: 24.6408, lng:46.7728, count: 1},{lat: 50.75, lng:-1.55, count: 1}, ...]
};

Это мой код:

var geoData;

function loadData() {
  alert("loading Data");
  getJSON();
}

function getJSON() {
  $.ajax({
    url: "assets/php/readGeoData.php",
    type: "GET",
    datatype: "json",
    success: function(data) {
      alert("ajax transfer successful ");
      geoData = data;
      //For debugging:
      alert(getGeoData());
    }
  })
}

function getGeoData() {
  return geoData;
}
<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />
  <!-- Leaflet JS -->
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
  <!-- Leaflet Heatmap JS -->
  <script src="assets/js/Leaflet.heat-gh-pages/dist/leaflet-heat.js"></script>
  <!-- map CSS -->
  <link rel="stylesheet" href="assets/css/map.css" />
  <!-- map JS -->
  <script src="assets/js/mymap.js"></script>
  <!-- main CSS -->
  <link rel="stylesheet" href="assets/css/main.css" />
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- data JS -->
  <script src="assets/js/loadGeoData.js"></script>

</head>

<body>
  <h1>movementprofile</h1>

  <button id="importButton">import geoData</button>
  <div id="mapid"></div>

  <script>
    $("#importButton").click(function() {
      loadData();
    });
  </script>

  <!-- creating the map -->
  <script>
    var mymap = L.map('mapid').setView([51.25, 10.5], 6);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxToken, {
      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);
  </script>
  <script>
    var heatmapData = {
      max: 8,
      data: getGeoData()
    };

    var heatmapLayer = new HeatmapOverlay(cfg);

    heatmapLayer.setData(8, getGeoData());
  </script>
</body>

</html>

PHP:

<?php

$db = new PDO('mysql:host=127.0.0.1;dbname=movementprofile;', 'root', *****);

$query ='SELECT longitude, latitude FROM movementprofile WHERE longitude IS NOT NULL AND latitude  IS NOT NULL';

foreach ($db->query($query) as $row) {

    print_r($row);

    $longitude = $row['longitude'];
    $latitude = $row['latitude'];

    $singleDataset = array('lon' => $longitude,'lat' => $latitude, 'count'=> 1);
    array_push($datasets,$singleDataset, JSON_FORCE_OBJECT);
    echo json_encode($datasets);
}

Это массив, который я получаю прямо сейчас (в поле предупреждения JS):

    Array
(
    [longitude] => 13.39611111
    [0] => 13.39611111
    [latitude] => 52.52944444
    [1] => 52.52944444
)
nullArray
(
    [longitude] => 13.37472222
    [0] => 13.37472222
    [latitude] => 52.53027778
    [1] => 52.53027778
)
nullArray
(
    [longitude] => 13.38361111
    [0] => 13.38361111
    [latitude] => 52.53
    [1] => 52.53
)
//... and so on, there are more than 30.000 entries

Итак, как я могу получить этот массив, как тот, который нужен Heatmap?

РЕДАКТИРОВАТЬ:

Поэтому я отредактировал свой PHP:

    foreach ($db->query($query) as $row) {
    print_r($row);

    $longitude = $row['longitude'];
    $latitude = $row['latitude'];

    $singleDataset = array('lon' => $longitude,'lat' => $latitude, 'count'=> 1);
    array_push($datasets,json_encode($singleDataset));

Но все же получил этот массив:

        Array
(
    [longitude] => 13.39611111
    [0] => 13.39611111
    [latitude] => 52.52944444
    [1] => 52.52944444
)

//и так далее

@thinsoldier Вы имели в виду это?

  • 0
    Текст, который вы указываете в поле alert (), выглядит как php, а не как json. Вы уверены, что ваша строка echo json_encode запущена? Кажется, вы где-то запускаете var_dump или print_r, и иногда он показывает null, а в других случаях - массив.
  • 0
    Я не думаю, что ваш эхо json_encode ($ datasets); строка должна находиться внутри цикла foreach, если библиотека js ожидает один объект, который содержит массив и другие свойства.
Показать ещё 2 комментария
Теги:
leaflet
heatmap

1 ответ

0

Первое, что я вижу в вашем коде, это то, что вы выполняете print_r($row); - удалить или прокомментировать это.

Также, возможно, посмотрите на мой php-коннектор, как создать geojson (пример подключается к postgres, но вы можете просто переписать его в mysql и настроить в своей структуре базы данных):

<?php

$dbconn = pg_connect("host=localhost port=5432 dbname=pguser user=pguser password=pass");
$result = pg_query($dbconn, "SELECT * FROM test");

$geojson = array(
   'type'      => 'FeatureCollection',
   'features'  => array()
);

while($row = pg_fetch_assoc($result)) {
    $feature = array(
        'id' => $row['id'],
        'type' => 'Feature', 
        'geometry' => array(
            'type' => 'Point',
            'coordinates' => array($row['latitude'], $row['longitude'])
        ),
        # Pass other attribute columns here
        'properties' => array(
            'test' => 'test',
            'column1' => $row['column1'],
            'column2' => $row['column2']
            )
        );
    # Add feature arrays to feature collection array
    array_push($geojson['features'], $feature);
}

header('Content-type: application/json');
echo json_encode($geojson, JSON_NUMERIC_CHECK);

?>

РЕДАКТИРОВАТЬ

Поскольку вы хотите получить определенную структуру json, а не geoJson с функциями, выше код может быть упрощен до:

....
$json = array(
   'max'      => '8',
   'data'  => array()
);

while($row = pg_fetch_assoc($result)) {
    $data = array(
        'lat' => $row['latitude'],
        'lng' => $row['longitude'],
        'count' => '1', 
        );
    # Add feature arrays to feature collection array
    array_push($json['data'], $data);
}

header('Content-type: application/json');
echo json_encode($json, JSON_NUMERIC_CHECK);
....
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню