Анализ и визуализация объектов с сайта объявлений на карте средствами Python и Leaflet.js
Как лучше представить результаты проведенного анализа? Сегодня мы поделимся своим опытом.
По мере завершения анализа аналогов для арендуемых нами объектов на сайтах объявлений, перед нами стал вопрос - как лучше представить полученные результаты? Отчёты в документе или таблица в excel — выглядят довольно «сухо», так как не могут в полной мере отразить полученный результат и сформировать окончательное мнение. Поэтому используем интерактивную карту.
В результате было принято решение о представлении полученных данных в виде интерактивной карты, на которой будут отображены объекты-аналоги для максимально удобного использования коллегами.
Для реализации такой интерактивности — было принято решение об использовании популярной javascript-библиотеки для работы с геоданными – leaflet.js.
Данные об арендуемых объектах и их аналогах среди объявлений в сети интернет необходимо обработать средствами python. Для предварительной обработки на вход подаётся excel-файл со следующими столбцами:
Далее, на основании полученного файла, средствами python будет формироваться json-объект, хранящий необходимые для работы библиотеки leaflet данные. Предварительно соберём информацию обо всех объектах, используя метод searchObjects:
def searchObjects(num_address,num_lat,num_lon,num_square,num_price,num_link=30,num_dist=31):
wb = openpyxl.load_workbook(file_path)
sheet = wb['Result']
addresses_list = []
json = {}
for count in range(2,sheet.max_row+1):
address = str((sheet.cell(row=count, column=num_address)).value)
if address not in addresses_list:
addresses_list.append(address)
json[address] = {}
json[address][“latitude”]=float((sheet.cell(row=count,column=num_lat)).value)
json[address][“longtitude”] =float((sheet.cell(row=count,column=num_lon)).value)
json[address][“square”] =float((sheet.cell(row=count,column=num_square)).value)
json[address][“price”] =float((sheet.cell(row=count,column=num_price)).value)
json[address][“neighbors”] =[]
json[address][“link”] =float((sheet.cell(row=count,column=num_link)).value)
json[address][“distance”] =float((sheet.cell(row=count,column=num_dist)).value)
else:
continue
return json
Теперь, когда информация о необходимых объектах заполнена, необходимо произвести поиск объектов-аналогов для каждого из арендуемых объектов. Для этого предназначен метод searchNeighbors:
В результате данных манипуляций, получим js-файл, в котором будет находится json-объект данного формата:
Теперь можно приступить к дальнейшей разработке. Переходим на страницу библиотеки leaflet на вкладку Download и скачиваем актуальную версию библиотеки:
После этого создаём html страницу нашего итогового приложения и подключаем в нем эту библиотеку и js-файл с json – объектом, хранящим наши объекты в head – разделе:
Метод setView в качестве параметров принимает в себя значение долготы и широты места, на котором будет центрироваться наша карта, а также величину зума, а с помощью L.tileLayer мы добавляем на нашу карту слой OpenStreetMap. Уже теперь можно посмотреть на первые результаты! Для этого запустим наш html-файл в браузере:
Теперь необходимо задать иконки, с помощью которых на нашей карте будут отображаться исследуемые объекты и создать слой, на котором будут отображаться объекты-аналоги:
var LeafIcon = L.Icon.extend({
options: {iconSize:[20, 25], iconAnchor:[10,25], popupAnchor:[0, 0]}
}); // задаём иконку, с помощью которой будем отображать арендуемые объекты
var neighborIcon = new LeafIcon({iconUrl: 'leaflet/neigh_baloon.png'}); // иконка объектов-аналогов
var objectsN = L.layerGroup(); // задаём слой для отображения объектов-аналогов
Можно приступить к размещению на карте арендуемых объектов. Для этого из созданного и подключенного к нашему html файлу json-объекта будем собирать необходимую информацию с помощью следующего кода:
for (let key of Object.keys(objects)) {
if (objects[key]["neighbors"].length!=0){
latitude = objects[key]["latitude"];
longtitude = objects[key]["longtitude"];
square = String(objects[key]["square"]);
price = String(objects[key]["price"])
description="<strong>"+key+"</strong><p>"+square+" м<sup>2</sup></p><p>Цена: "+price+"</p>";//описание для popup маркера
var marker = L.marker([latitude, longtitude],{icon: neighborIcon});
marker.on("click", object_popup_click);
marker.properties = {object_address: key, object_square:square, object_price:price};
marker.addTo(map).bindPopup(description);}}
Строка marker.on(«click, object_popup_click) является обработчиком события и при нажатии на размещенный маркер будет запускать метод object_popup_click, который будет отображать объекты-аналоги, для этого добавим код этого метода в наш html-файл:
function object_popup_click(e){
try{objectsN.eachLayer(function(layer){map.removeLayer(layer);});}
catch(err){console.log("Ошибка очистки значения");}//при ошибке выводим сообщение в консоль
var object_latitude = e.latlng.lat;
var object_longtitude = e.latlng.lng;
var circle = L.circle([object_latitude,object_longtitude],{//создаём окружность для отрисоки
color:'#00008B',fillColor:'#6495ED',
fillOpacity: 0.5,radius: 1000});
objectsN.addLayer(circle).addTo(map);//добавляем окружность для рисования
object_address = e.sourceTarget.properties["object_address"];
object_square = e.sourceTarget.properties["object_square"];
object_price = e.sourceTarget.properties["object_price"]
neighbors = objects[object_address]["neighbors"];
neighbors_number = neighbors.length;
for (var i=0; i<neighbors_number; i++){
data = objects[neighbors[i]];
link = "<a href=\""+data["link"]+"\"target=\"_blank\">Ссылка</a>"
neighbor_description = "<strong>"+neighbors[i]+"</strong><p>"+data["square"]+" м<sup>2</sup></p><p>Цена:"+data["price"]+"</p>"+link+"<p>Расстояние:"+data["distance"]+"</p>";
neighbor_marker = L.marker([data["latitude"],data["longtitude"]]).bindPopup(neighbor_description);
objectsN.addLayer(neighbor_marker).addTo(map);}}
Запускаем итоговое приложение и выбираем один из интересующих объектов:
Пробуем нажать на один из появившихся маркеров:
В итоге мы получили практические навыки по обработке данных на языке python и их дальнейшее отображение на карте с помощью javascript-библиотеки leaflet.js.
В Избранное! Спасибо !!!