使用 Python Dash-Leaflet 将模板弹出窗口添加到 GeoJSON 组件

Question

我是编程初学者，Python。我有一个使用 dash-leaflet 构建的地图应用程序，其中 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)

如果您需要更多自定义选项 and/or 不想添加属性（例如出于性能原因），您需要实现自定义 onEachFeature 函数。如果您在 assets 文件夹中创建一个 .js 文件，其内容如下，

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

你可以这样绑定函数，

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。

使用 Python Dash-Leaflet 将模板弹出窗口添加到 GeoJSON 组件

Add template popup to GeoJSON component with Python Dash-Leaflet

python

plotly-dash