Загрузка данных из файла или БД на карту библиотеки amMaps(am4arts)

121

28 июня 2021, 07:00

Столкнулся с проблемой загрузки данных из внешнего источника, на какой-либо объект, на картах в библиотеке ma4arts(amMap).

В документации написано, что есть для этого специальный класс dataSource.url, но вот проблема заключается в том, что загрузить данные на график(диаграмму) таким образом можно без особых заморочек, а вот с картами совсем не очевидно.

Ниже немного переработанный код из раздела "examples"

// Create the map chart
var chart = am4core.create("chartdiv", am4maps.MapChart);
/* -------------------- */
// Series for RU map
var russiaSeries = chart.series.push(new am4maps.MapPolygonSeries());

// Chech if proper geodata is loaded
try {
    russiaSeries.geodata = am4geodata_russiaHigh;
}
catch (e) {
    chart.raiseCriticalError(new Error("Map geodata could not be loaded. Please download the latest <a href=\"https://www.amcharts.com/download/download-v4/\">amcharts geodata</a> and extract its contents into the same directory as your amCharts files."));
}
chart.projection = new am4maps.projections.Miller();
var rusPolygonTemplate = russiaSeries.mapPolygons.template;
rusPolygonTemplate.tooltipText = "{name}\n{value}";
rusPolygonTemplate.fill = chart.colors.getIndex(1);
rusPolygonTemplate.nonScalingStroke = true;
/*Выделение при наведении*/
var hs = rusPolygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");
russiaSeries.dataSource.url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json";
// russiaSeries.dataSource.events.on("done", function(ev) {
//     // Data loaded and parsed
//     console.log(ev.target.data);
// });
russiaSeries.events.on("hit", function (ev) {
    chart.closeAllPopups();
//тут по идее обращение шло к файлу geoJSON - свойству name, но привязав событие к серии dataSource надо обращаться к полю из json строки.
    chart.openPopup("b'g;dwe"+ev.target.dataItem.dataContext.cars); 
});
/*Настройки показа областей*/
russiaSeries.exclude = ["AQ"];
russiaSeries.include = ['RU-LIP'];
russiaSeries.useGeodata = true;
russiaSeries.data = [{
    "id":"RU-LIP",
    "name":"Липецк",
    "value": "{cars}" //данное поле никак не отображается
}];

Все вроде понятно, белым пятном в данном вопросе уже который день, остается только то, каким образом передавать на карту динамически подгружаемую информацию? Подскажите товарищи, кто работал над чем-то подобным.
P.S. прошу особо не ругаться, так как в JS не опытен, да и информации на русском языке по данной библиотеке, как кот наплакал.

Answer 1

Итак, на данную проблему - был найдет ответ. Исходя из того, что мои знания в JS весьма поверхностны, то я исходил из того, что знал лучше. В итоге вопрос был решен средствами PHP.

Я отказался от представления дынных в блоке кода: russiaSeries.data , вместо этого я создал массив в PHP с такой же структурой и собственно работал уже с ним. Но это был тупиковый путь, так как на карту в итоге надо было помещать много данных (но об этом попозже).
код PHP, который подается в качестве источника для карты:

 public function stationResult($queryString)
    {
        $stationNames = [001, 002, 003, ....];
        $resultArray = [
            "001" => array("latitude" => 50.0, "longitude"=>36.0, "name"=>"Station1", "data"=>array()),
            "002" => array("latitude" => 50.1, "longitude"=>36.1, "name"=>"Station2", "data"=>array())
        ];
        foreach ($stationNames as $station){
            foreach($queryString as $index => $value){
                if ($value['stationID'] == $station){
                        $resultArray[$index] = iconv('cp1251', 'utf-8', $value['name']);
                        $resultArray[$index] .= $value['dateTime']);
                        $resultArray[$index] .= "<br/> $value['text'])";
                        $resultArray[$index] =  array_push($resultArray[$index]['data'], $resultArray[$index]);
                        
                } else {...}
    
            }
        }
        return $resultArray;
    }
$dataStation = stationResult(/*result query from data base*/);
echo json_encode($dataStation);

в самом файле где инициализируется код JS для построения карты, указывается источник, через russiaSeries.dataSource.url. Далее уже в настройках объектов, таких как:
russiaSeries.tooltip указываем какой конкретно массив выводить, в моем случае все данные были в массиве data

russiaSeries.tooltipText = "{data};"

Теперь почему это был тупиковый путь.

После того, как получилось вывести простую информацию из базы данных, потребовалось добавить еще дополнительную инфу. Тут встал вопрос: "как их связать?". Связка была сделана через объединения запросов. После успешного решения, аппетит разгорелся и потребовалось вывести уже не просто табличные данные, а мини html страницу(текст со стилями и оформлением), ну тут вылезло, то что это все грузится непростительно долго.
В итоге, надо решать это средствами PHP + JS, а не только одним PHP.
Если кто уже работает с этой библиотекой и успешно решает задачи, буду благодарен за любую помощь.