Spaces:
Sleeping
Sleeping
| import json | |
| import html | |
| import folium | |
| import gradio as gr | |
| from folium import plugins | |
| from lib import RequestFunction | |
| def CreateMap() -> folium.Map: | |
| """Çizim araçları ve çoklu temel katmanlar içeren ana haritayı oluşturur.""" | |
| fmap = folium.Map(location=[37.511905, 38.51532], zoom_start=6, world_copy_jump=True, tiles=None) | |
| # Temel katmanlar | |
| folium.TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", attr="OpenStreetMap", name="OpenStreetMap").add_to(fmap) | |
| folium.TileLayer("http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}", attr="Google", name="Google Uydu").add_to(fmap) | |
| folium.TileLayer( | |
| "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", attr="Esri", name="Esri Dünya Uydu" | |
| ).add_to(fmap) | |
| folium.TileLayer( | |
| "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}", | |
| attr="Esri", | |
| name="Esri Dünya Sokak", | |
| ).add_to(fmap) | |
| folium.TileLayer( | |
| "https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", attr="CartoDB", name="CartoDB Açık" | |
| ).add_to(fmap) | |
| # Koordinat göstergesi | |
| formatter = "function(num) {return L.Util.formatNum(num, 5) + ' ° ';};" | |
| plugins.MousePosition( | |
| position="bottomright", separator=" | ", lng_first=True, prefix="Konum:", lat_formatter=formatter, lng_formatter=formatter | |
| ).add_to(fmap) | |
| plugins.Geocoder(position="topleft").add_to(fmap) | |
| plugins.Draw(export=True, filename="drawing.geojson", position="topleft", show_geometry_on_click=False).add_to(fmap) | |
| plugins.Fullscreen(position="topright").add_to(fmap) | |
| folium.LayerControl(position="bottomleft").add_to(fmap) | |
| # Çizim olaylarını Gradio bileşenlerine bağla | |
| map_name = fmap.get_name() | |
| fmap.get_root().html.add_child( | |
| folium.Element( | |
| f""" | |
| <script type="text/javascript"> | |
| document.addEventListener('DOMContentLoaded', function() {{ | |
| var idx = 0; | |
| var drawnItems = new L.FeatureGroup(); | |
| {map_name}.addLayer(drawnItems); | |
| const updateGeoJsonOutput = (geoJsonData) => {{ | |
| const textArea = parent.document.querySelector('#geojson_output textarea'); | |
| if (!textArea) return; | |
| textArea.value = JSON.stringify(geoJsonData); | |
| textArea.dispatchEvent(new Event('input')); | |
| }}; | |
| // "GeoJSON Al" butonuna tıklandığında güncel veriyi aktar | |
| const processBtn = parent.document.getElementById('geojson_process'); | |
| if (processBtn) {{ | |
| processBtn.onclick = function() {{ | |
| updateGeoJsonOutput(drawnItems.toGeoJSON()); | |
| }}; | |
| }} | |
| {map_name}.on('draw:created', function(e) {{ | |
| var layer = e.layer; | |
| var title, value; | |
| do {{ | |
| title = prompt('Şekle bir isim giriniz:', ''); | |
| if (title === null) return; | |
| }} while (!title.trim()); | |
| do {{ | |
| value = prompt('Şekle bir değer giriniz:', ''); | |
| if (value === null) return; | |
| }} while (!value.trim()); | |
| var id = idx++; | |
| var feature = layer.feature = layer.feature || {{}}; | |
| feature.type = 'Feature'; | |
| var props = feature.properties = feature.properties || {{}}; | |
| props.Id = id; | |
| props.Title = title; | |
| props.Value = value; | |
| layer.bindTooltip( | |
| `Şekil: ${{id + 1}} | İsim: ${{title}} | Değer: ${{value}}`, | |
| {{ permanent: false, direction: 'center', className: 'label-tooltip' }} | |
| ); | |
| drawnItems.addLayer(layer); | |
| updateGeoJsonOutput(drawnItems.toGeoJSON()); | |
| }}); | |
| {map_name}.on('draw:deleted', function(e) {{ | |
| e.layers.eachLayer(function(layer) {{ | |
| drawnItems.removeLayer(layer); | |
| }}); | |
| updateGeoJsonOutput(drawnItems.toGeoJSON()); | |
| }}); | |
| {map_name}.on('draw:edited', function(e) {{ | |
| updateGeoJsonOutput(drawnItems.toGeoJSON()); | |
| }}); | |
| }}); | |
| </script> | |
| """ | |
| ) | |
| ) | |
| return fmap | |
| def CreateDatasetMap(geojson_data: str) -> str: | |
| """GeoJSON verisinden GEE haritası üretir ve iframe olarak döndürür.""" | |
| if not geojson_data: | |
| return "<p>Lütfen önce haritada bir bölge çizin.</p>" | |
| geojson = json.loads(geojson_data) | |
| features = geojson.get("features", []) | |
| if not features: | |
| return "<p>Çizili şekil bulunamadı.</p>" | |
| coords = features[0]["geometry"]["coordinates"][0] | |
| fmap = RequestFunction(coords) | |
| if fmap is None: | |
| return "<p>Veri alınamadı.</p>" | |
| raw_html = fmap._repr_html_() | |
| escaped = html.escape(raw_html) | |
| return f"""<iframe | |
| style="width:100%; height:520px; border:none;" | |
| sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-modals" | |
| allowfullscreen | |
| srcdoc='{escaped}' | |
| ></iframe>""" | |
| # Ana haritayı oluştur | |
| basemap = CreateMap() | |
| # Gradio Arayüzü | |
| with gr.Blocks(title="GEE Harita Uygulaması") as app: | |
| gr.Markdown("# GEE Harita Uygulaması") | |
| gr.Markdown("Çalışmak istediğiniz bölgeyi harita üzerinde çizin, ardından veri çekin.") | |
| with gr.Row(): | |
| geojson_process_btn = gr.Button("GeoJSON Al", elem_id="geojson_process", variant="secondary") | |
| prepare_dataset_btn = gr.Button("Veri Çek", elem_id="prepare_dataset", variant="primary") | |
| # Ana harita | |
| map_html = gr.HTML(basemap._repr_html_(), elem_id="map_container") | |
| # GEE sonuç haritası | |
| dataset_map_html = gr.HTML(elem_id="dataset_map_container") | |
| # Ham GeoJSON çıktısı (JS tarafından doldurulan gizli alan) | |
| geojson_output = gr.Textbox( | |
| value="", | |
| placeholder="Çizilen şekillerin GeoJSON verisi burada görünür.", | |
| label="Ham GeoJSON", | |
| lines=4, | |
| elem_id="geojson_output", | |
| interactive=False, | |
| ) | |
| # GeoJSON görünümü | |
| geojson_view = gr.JSON(label="GeoJSON Görünümü") | |
| # Event bağlantıları | |
| geojson_process_btn.click( | |
| fn=lambda data: json.loads(data) if data else {}, inputs=geojson_output, outputs=geojson_view, scroll_to_output=True | |
| ) | |
| prepare_dataset_btn.click(fn=CreateDatasetMap, inputs=geojson_output, outputs=dataset_map_html, scroll_to_output=True) | |
| app.queue(max_size=10) | |
| app.launch(share_server_protocol="https") | |