Как мне получить имя/идентификатор маркера листа для отправки в функцию Python в приложении FLASK ⇐ Python
-
Гость
Как мне получить имя/идентификатор маркера листа для отправки в функцию Python в приложении FLASK
Я создал простую карту, используя фолиум, и добавил слой с кучей маркеров, обозначающих расположение некоторых метеостанций.
Я хотел бы иметь возможность щелкнуть один из маркеров, получить его имя/идентификатор и отправить его в функцию Python, которая затем отобразит некоторые параметры с этой метеостанции. В идеале я хотел бы отображать это изображение непосредственно во всплывающем окне.
Я пытаюсь создать для этого приложение FLASK и считаю, что иду в правильном направлении, но мне не удается вызвать функцию Python. Кроме того, я не уверен, что мой шаблон что-то делает.
Мой код на данный момент (для этого примера я упростил свою функцию Python, создав только простой файл .txt):
импортировать фолиум,бранку,запросы из элемента импорта branca.element из фляги импорта Flask, render_template, request, jsonify из folium.plugins импортировать LocateControl из folium.plugins импортировать MarkerCluster приложение = Колба(__name__) @app.route('/') карта защиты(): start_coords = (38.7088, -9.1576) folium_map = folium.Map(location=start_coords, Zoom_start=8,max_bounds=True,height="100%",zoom_control=False) fig=branca.element.Figure(height="100%",width='100%') fig.add_child(folium_map) folium.plugins.Fullscreen(position='bottomleft').add_to(folium_map) е=фолиум.LatLngPopup2() folium_map.add_child(e) LocateControl(strings={'drawMarker':'False'}).add_to(folium_map) ft_grp=folium.map.FeatureGroup(name='Метеостанции - последние 24 часа',show=False) rsp=requests.get('https://api.ipma.pt/open-data/observati ... tions.json') коды=rsp.json() шаблон = ''' функция handleMarkerClick(markerId) { // Отправляем AJAX-запрос на сервер с идентификатором маркера $.ajax({ тип: "ПОСТ", URL: "/plot_station", данные: JSON.stringify({ id: маркерId }), contentType: "application/json; charset=utf-8", Тип данных: «JSON», успех: функция (ответ) { console.log(ответ.сообщение); } }); } // Перебираем маркеры и прикрепляем событие клика var маркеры = document.querySelectorAll('.leaflet-marker-icon'); маркеры.forEach(функция(маркер) { маркер.addEventListener('клик', функция() { // Извлекаем идентификатор маркера из DOM-элемента маркера var маркерId = маркер.getAttribute('идентификатор данных'); handleMarkerClick (markerId); }); }); ''' для ia,cd в перечислении (коды): если ia==0: name= cd['properties']['localEstacao'] id= cd['свойства']['idEstacao'] coord= cd['геометрия']['координаты'] popup = folium.Popup(id, max_width=150) маркер=фолиум.Маркер( местоположение=[координата[1],координата[0]], всплывающее окно = всплывающее окно, идентификатор = строка (идентификатор) ).add_to(ft_grp) map_id=folium_map.get_name() e = Элемент (шаблон) html = folium_map.get_root() html.script.get_root().render() # Вставляем новый элемент или собственный JS html.script._children[e.get_name()] = е folium_map.add_child(ft_grp) folium.LayerControl().add_to(folium_map) folium_map.save('test.html') вернуть fig._repr_html_() @app.route('/plot_station', методы=['POST']) защитаplot_station(): данные = request.get_json() маркер_id = data.get('id') печать('ааа') если идентификатор_маркера: # Используйте маркер_id для выполнения действий, например, создания файла имя файла = f"{marker_id}.txt" с open(filename, 'w') как fid: fid.write("Маркер нажат!") return jsonify({"message": "Нажатие на маркер обработано успешно"}) если __name__ == '__main__': app.run(отладка=Истина) У меня нет большого опыта работы с flask или javascript, но если кто-то сможет указать мне правильное направление, я буду признателен.
Спасибо
Я создал простую карту, используя фолиум, и добавил слой с кучей маркеров, обозначающих расположение некоторых метеостанций.
Я хотел бы иметь возможность щелкнуть один из маркеров, получить его имя/идентификатор и отправить его в функцию Python, которая затем отобразит некоторые параметры с этой метеостанции. В идеале я хотел бы отображать это изображение непосредственно во всплывающем окне.
Я пытаюсь создать для этого приложение FLASK и считаю, что иду в правильном направлении, но мне не удается вызвать функцию Python. Кроме того, я не уверен, что мой шаблон что-то делает.
Мой код на данный момент (для этого примера я упростил свою функцию Python, создав только простой файл .txt):
импортировать фолиум,бранку,запросы из элемента импорта branca.element из фляги импорта Flask, render_template, request, jsonify из folium.plugins импортировать LocateControl из folium.plugins импортировать MarkerCluster приложение = Колба(__name__) @app.route('/') карта защиты(): start_coords = (38.7088, -9.1576) folium_map = folium.Map(location=start_coords, Zoom_start=8,max_bounds=True,height="100%",zoom_control=False) fig=branca.element.Figure(height="100%",width='100%') fig.add_child(folium_map) folium.plugins.Fullscreen(position='bottomleft').add_to(folium_map) е=фолиум.LatLngPopup2() folium_map.add_child(e) LocateControl(strings={'drawMarker':'False'}).add_to(folium_map) ft_grp=folium.map.FeatureGroup(name='Метеостанции - последние 24 часа',show=False) rsp=requests.get('https://api.ipma.pt/open-data/observati ... tions.json') коды=rsp.json() шаблон = ''' функция handleMarkerClick(markerId) { // Отправляем AJAX-запрос на сервер с идентификатором маркера $.ajax({ тип: "ПОСТ", URL: "/plot_station", данные: JSON.stringify({ id: маркерId }), contentType: "application/json; charset=utf-8", Тип данных: «JSON», успех: функция (ответ) { console.log(ответ.сообщение); } }); } // Перебираем маркеры и прикрепляем событие клика var маркеры = document.querySelectorAll('.leaflet-marker-icon'); маркеры.forEach(функция(маркер) { маркер.addEventListener('клик', функция() { // Извлекаем идентификатор маркера из DOM-элемента маркера var маркерId = маркер.getAttribute('идентификатор данных'); handleMarkerClick (markerId); }); }); ''' для ia,cd в перечислении (коды): если ia==0: name= cd['properties']['localEstacao'] id= cd['свойства']['idEstacao'] coord= cd['геометрия']['координаты'] popup = folium.Popup(id, max_width=150) маркер=фолиум.Маркер( местоположение=[координата[1],координата[0]], всплывающее окно = всплывающее окно, идентификатор = строка (идентификатор) ).add_to(ft_grp) map_id=folium_map.get_name() e = Элемент (шаблон) html = folium_map.get_root() html.script.get_root().render() # Вставляем новый элемент или собственный JS html.script._children[e.get_name()] = е folium_map.add_child(ft_grp) folium.LayerControl().add_to(folium_map) folium_map.save('test.html') вернуть fig._repr_html_() @app.route('/plot_station', методы=['POST']) защитаplot_station(): данные = request.get_json() маркер_id = data.get('id') печать('ааа') если идентификатор_маркера: # Используйте маркер_id для выполнения действий, например, создания файла имя файла = f"{marker_id}.txt" с open(filename, 'w') как fid: fid.write("Маркер нажат!") return jsonify({"message": "Нажатие на маркер обработано успешно"}) если __name__ == '__main__': app.run(отладка=Истина) У меня нет большого опыта работы с flask или javascript, но если кто-то сможет указать мне правильное направление, я буду признателен.
Спасибо
Мобильная версия