Анализ и визуализация объектов с сайта объявлений на карте средствами 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:

def searchNeighbors(self,addressesJson): wb = openpyxl.load_workbook(self.file_path) sheet = wb['Result'] for count in range(2,sheet.max_row+1): cell = sheet.cell(row=count, column=1) address = cell.value cell = sheet.cell(row=count,column=6) neighbor_address = cell.value addressesJson[address]["neighbors"].append(neighbor_address) return addressesJson

Метод, который объединяет в себе поиск информации об объектах и их аналогах и формирует файл, который в дальнейшем будет использован для визуализации:

def createJson(self): file = open("map.js","w",encoding="utf-8") json1 = self.searchObjects(1,2,3,5,4) json2 = self.searchObjects(6,7,8,10,9,11,12) json1.update(json2) resultJson = self.searchNeighbors(json1) file.write("objects="+str(resultJson)) file.close()

В результате данных манипуляций, получим js-файл, в котором будет находится json-объект данного формата:

Теперь можно приступить к дальнейшей разработке. Переходим на страницу библиотеки leaflet на вкладку Download и скачиваем актуальную версию библиотеки:

После этого создаём html страницу нашего итогового приложения и подключаем в нем эту библиотеку и js-файл с json – объектом, хранящим наши объекты в head – разделе:

После этого в теле нашего html-файла создадим объект, в котором будет отображаться наша итоговая карта:

Для этого объекта указываем css – свойства: высоту и ширину окна

#map { width: 55%; height: 99%; }

Далее в коде, после нашего объекта, хранящего карту — разместим блок, в котором будем писать код на javascript для взаимодействия с картой:

Теперь в данном блоке напишем код, который будет отображать нашу карту:

var map = L.map('map').setView([47.222078, 39.720349], 13); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a rel="nofollow" href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

Метод setView в качестве параметров принимает в себя значение долготы и широты места, на котором будет центрироваться наша карта, а также величину зума, а с помощью L.tileLayer мы добавляем на нашу карту слой OpenStreetMap. Уже теперь можно посмотреть на первые результаты! Для этого запустим наш html-файл в браузере:

Теперь необходимо задать иконки, с помощью которых на нашей карте будут отображаться исследуемые объекты и создать слой, на котором будут отображаться объекты-аналоги:

Можно приступить к размещению на карте арендуемых объектов. Для этого из созданного и подключенного к нашему 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-файл:

Запускаем итоговое приложение и выбираем один из интересующих объектов:

Пробуем нажать на один из появившихся маркеров:

В итоге мы получили практические навыки по обработке данных на языке python и их дальнейшее отображение на карте с помощью javascript-библиотеки leaflet.js.

Анализ и визуализация объектов с сайта объявлений на карте средствами Python и Leaflet.js​

Анализ и визуализация объектов с сайта объявлений на карте средствами Python и Leaflet.js