Мониторинг при помощи Leaflet + PostgreSQL + PHP

Не знаете, где задать вопрос? Задавайте здесь.
Ответить
lostunit
Новоприбывший
Сообщения: 1
Зарегистрирован: 14 июл 2013, 13:13
Репутация: 0

Мониторинг при помощи Leaflet + PostgreSQL + PHP

Сообщение lostunit » 08 окт 2013, 18:48

Что имеется:
1. База данных PostgreSQL с постоянно обновляемыми координатами подвижных объектов (машин)

Задача:
Отображать координаты получаемые в БД маркерами на онлайн картах.

Решение:
Было решено использовать библиотеку leaflet, в которую при помощи PHP будут подгружаться маркеры из базы.
Чтобы передвижение маркеров можно было отследить без перезагрузки страницы, решено было запускать PHP ajax скриптом.
Возникла проблема с ajax скриптом

Проблема:
При использовании такого способа Скрипт подгружает каждый раз новые маркеры, но вместо того, чтобы заменять старые точки с координатами на новые он добавляет все координаты заново.


Приведу пример кода:

Код: Выделить всё

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">  
//Подключаем библиотеки jquery и leaflet
<script type="text/javascript" src="jquery.js"></script>  
<link rel="stylesheet" href="js/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="js/leaflet.ie.css" />
<![endif]-->
<script src="js/leaflet.js"></script>
</head>  
//определяем стиль отображения блока карты
  <style>
	#map {position: absolute; top: 100px; right: 0px; bottom: 0px; left: 0px }
</style>
<body>  
          <div id="map"></div>  
 <script>
 //Определяем карту, координаты центра и начальный масштаб
var map = L.map('map').setView([45.041236, 38.98386], 12);
var drvs = L.layerGroup();
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a rel="nofollow" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

[size=150]//вот тут и кроется проблема, функция updateMarker() будет каждые 1000мс добавлять координаты на карту леафлет, хотя нужно, что бы она при последующем выводе заменяла выведенные ранее данные.
	updateMarker();

function updateMarker() {
    $.ajax({
        dataType: 'script',
        url: 'PGSQL3_AJAX.php'
    })
    setTimeout(updateMarker, 1000);
}   [/size]

</script>  

 
</body>  
</html>  
PHP просто просто подключается к базе, записывает координаты в массив а затем просто выводит их вместе с необходимыми для Leaflet'а атрибутами "L.marker([,]).addTo(map);"
Вот что именно отдает PGSQL3_AJAX.php:

Код: Выделить всё

L.marker([45.1259878205834,39.0168285369873]).addTo(map); L.marker([45.0817634528028,38.9776039123535]).addTo(map); L.marker([45.0805819240118,38.9750596996026]).addTo(map); L.marker([45.0753769953766,39.0012744303673]).addTo(map); L.marker([45.0723875806419,38.9927041047575]).addTo(map); L.marker([45.0723612309011,38.991199082126]).addTo(map); L.marker([45.071746347362,39.0150545013297]).addTo(map); L.marker([45.0711733333333,39.00089]).addTo(map); L.marker([45.0701867651014,39.0001773834229]).addTo(map); L.marker([45.06738,38.915995]).addTo(map); L.marker([45.0616391191892,38.9544296264648]).addTo(map); L.marker([45.06153,38.98919]).addTo(map); L.marker([45.05947507,38.94810291]).addTo(map); L.marker([45.0576516666667,39.0351016666667]).addTo(map); L.marker([45.0534294,38.99500516]).addTo(map); L.marker([45.0444566666667,38.9779116666667]).addTo(map); L.marker([45.0409583333333,38.9694966666667]).addTo(map); L.marker([45.04038793,39.1139068]).addTo(map); L.marker([45.0391797814518,39.0963603090495]).addTo(map); L.marker([45.0359816666667,39.0211233333333]).addTo(map); L.marker([45.034775,39.08607]).addTo(map); L.marker([45.0337755700343,38.9199648459331]).addTo(map); L.marker([45.03354595,39.0250874]).addTo(map); L.marker([45.0326883333333,39.0501883333333]).addTo(map); L.marker([45.0325820666667,39.05019845]).addTo(map); L.marker([45.0324789338011,39.1333735481155]).addTo(map); L.marker([45.03244814,38.9947175]).addTo(map); L.marker([45.0324098544879,38.9158487319946]).addTo(map); L.marker([45.02969248,38.97342813]).addTo(map); L.marker([45.0279344106093,39.1201467253268]).addTo(map); L.marker([45.02769,38.990575]).addTo(map); L.marker([45.02419252,39.06524453]).addTo(map); L.marker([45.02404108,39.06813827]).addTo(map); L.marker([45.0206865869691,39.022814909977]).addTo(map); L.marker([45.0205516666667,39.049345]).addTo(map); L.marker([45.0203566666667,38.985355]).addTo(map); L.marker([45.0202237384957,39.0494879901535]).addTo(map); L.marker([45.01790209,38.97834139]).addTo(map); L.marker([45.01725,38.99215167]).addTo(map); L.marker([45.0145883333333,39.086435]).addTo(map); L.marker([45.0119583333333,39.066775]).addTo(map); L.marker([45.0050066666667,38.96085]).addTo(map);
К сожалению очень туго понимаю javascript и плохо знаком с Leaflet'ом. Мне смутно представляется два решения проблемы:
1-й каким-то образом сделать так чтоб ajax скрипт заменял ранее добавленные данные на карту
2-й искать решение гдето в выдаваемых php данных.
Огромная просьба подскажите как можно решить или обойти данную проблему. Заранее благодарен.

Аватара пользователя
Denis Rykov
Гуру
Сообщения: 3376
Зарегистрирован: 11 апр 2008, 21:09
Репутация: 529
Ваше звание: Author
Контактная информация:

Re: Мониторинг при помощи Leaflet + PostgreSQL + PHP

Сообщение Denis Rykov » 09 окт 2013, 06:02

Передаете на клиента информацию об объекте, например, в JSON-e в виде {data: [{id: 123, lat: 10, lon: 20}, {id: 124, lat: 11, lon: 12},..]}, затем либо находите на карте объекты с такими же id и двигаете их на новое место, либо полностью удаляете предыдущие маркеры и рисуете заново.
Spatial is now, more than ever, just another column- The Geometry Column.

dooh007
Интересующийся
Сообщения: 24
Зарегистрирован: 22 июл 2011, 09:50
Репутация: 2
Контактная информация:

Re: Мониторинг при помощи Leaflet + PostgreSQL + PHP

Сообщение dooh007 » 16 сен 2019, 12:49

Denis Rykov писал(а):
09 окт 2013, 06:02
Передаете на клиента информацию об объекте, например, в JSON-e в виде {data: [{id: 123, lat: 10, lon: 20}, {id: 124, lat: 11, lon: 12},..]}, затем либо находите на карте объекты с такими же id и двигаете их на новое место, либо полностью удаляете предыдущие маркеры и рисуете заново.
setLatLng() в помощь, а если объекты загружались через L.geoJSON([photo_aaray]. Как найти нужный объект

wladfm
Участник
Сообщения: 69
Зарегистрирован: 04 июл 2016, 16:02
Репутация: 8

Re: Мониторинг при помощи Leaflet + PostgreSQL + PHP

Сообщение wladfm » 16 сен 2019, 13:14

Если объектов не много, то наверно проще обновлять все маркеры, чем искать какой обновить

Аватара пользователя
antonv
Активный участник
Сообщения: 229
Зарегистрирован: 29 ноя 2016, 10:44
Репутация: 114
Откуда: Санкт-Петербург

Re: Мониторинг при помощи Leaflet + PostgreSQL + PHP

Сообщение antonv » 20 сен 2019, 12:26

lostunit,

вместо того, чтобы добавлять маркеры напрямую к карте, добавляйте их к L.LayerGroup.
Тогда их можно будет удалить все одним махом:

Код: Выделить всё

var layerGroup = L.layerGroup().addTo(map);

// создаём маркер:
L.marker().addTo(layerGroup);

// удаляем все маркеры:
layerGroup.clearLayers();
И затем добавляете таким же образом свежие маркеры.

Ответить

Вернуться в «Я новичок!»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 10 гостей