使用 Python Dash-Leaflet 向 GeoJSON 組件添加模板彈出窗口

Question

我是編程和 Python 的初學者。 我有一個使用 dash-leaflet 構建的 map 應用程序，其中包含dl.GeoJSON組件包含的幾個（~10）GeoJSON 文件。 我想顯示一個包含每個文件的所有屬性的彈出窗口。 在實現 dl.GeoJSON 之前，我曾經通過讀取我的 geojson 並定義如下彈出窗口來創建我的圖層：

def compute_geojson(gjson):

    geojson = json.load(open(gjson["path"],encoding='utf8'))
    if 'Polygon' in geojson["features"][0]["geometry"]["type"]:
        data = [
            dl.Polygon(
                positions=get_geom(feat),
                children=[
                    dl.Popup([html.P(k + " : " + str(v)) for k,v in feat["properties"].items()],maxHeight=300),
                ],
                color=get_color(gjson,feat), weight=0.2, fillOpacity=gjson["opacity"], stroke=True
            ) for feat in geojson['features']
        ]
...

我想使用組件 dl.GeoJSON 為我所有的 geojson（具有不同的結構）執行此操作，因為它應該比我的方法渲染得更快。 可能嗎？ 我用 onEachFeature 嘗試了一些javascript但沒有成功。

謝謝

Answer 1

最簡單的解決方案是添加一個名為popup的功能，其中包含所需的彈出內容，因為GeoJSON組件會自動將其呈現為彈出窗口，

import dash_leaflet as dl
import dash_leaflet.express as dlx

data = dlx.dicts_to_geojson([dict(lat=-37.8, lon=175.6, popup="I am a popup")])
geojson = dl.GeoJSON(data=data)

如果您需要更多自定義選項和/或不想添加屬性（例如出於性能原因），則需要實現自定義onEachFeature function。 如果您在 assets 文件夾中創建 a.js 文件，其內容如下，

window.someNamespace = Object.assign({}, window.someNamespace, {
    someSubNamespace: {
        bindPopup: function(feature, layer) {
            const props = feature.properties;
            delete props.cluster;
            layer.bindPopup(JSON.stringify(props))
        }
    }
});

你可以像這樣綁定 function，

import dash_leaflet as dl
from dash_extensions.javascript import Namespace

ns = Namespace("someNamespace", "someSubNamespace")
geojson = dl.GeoJSON(data=data, options=dict(onEachFeature=ns("bindPopup")))

在上面的代碼示例中，我使用的是dash-leaflet==0.1.10和dash-extensions==0.0.33 。