GeoDjango-Leaflet实现外键关联用户名称弹窗显示问题

我来帮你搞定这个问题！你现在Leaflet弹窗里只能显示用户的外键ID，是因为默认的GeoJSON序列化只包含Reserve模型的直接字段，不会自动带出关联User模型的name字段。咱们通过以下几步修改就能解决：

第一步：修改视图函数，让GeoJSON包含用户名称 #

我们需要在查询Reserve数据时，同时预取关联的User数据（避免重复查询数据库），并通过annotate把用户的name字段作为额外字段加到查询集里，最后序列化时指定包含这个新字段：

from django.db.models import F
from django.http import HttpResponse
from django.contrib.gis.serializers import serialize
from .models import Reserve

def reserve_datasets(request):
    # 预取关联的User数据，同时添加user_name字段存储用户名称
    reserves = Reserve.objects.all().select_related('user').annotate(user_name=F('user__name'))
    # 指定要序列化的字段：geom（地理数据）、name（Reserve的名称）、user_name（用户名称）
    reserve_geojson = serialize('geojson', reserves, fields=('geom', 'name', 'user_name'))
    return HttpResponse(reserve_geojson, content_type='application/json')

注意：如果你的User模型里存储名称的字段是username（比如Django默认的User模型），把F('user__name')改成F('user__username')就行。

第二步：修改JS代码，显示用户名称并修正变量错误 #

你原来的JS里还有个小问题：变量名all_reserve_datasets和后面的all_applied_reserve不一致，导致图层可能加不到地图上，同时咱们要换成新的user_name字段来显示用户名称：

<script type="text/javascript">
function our_layers(map,options){
    var all_reserve_datasets = new L.GeoJSON.AJAX("{% url 'reserve_datasets'%}",{
        onEachFeature: function(feature,layer){
            // 使用新的user_name字段渲染用户名称
            layer.bindPopup('<h4> Name: '+feature.properties.name+'</h4><p>User: '+feature.properties.user_name+'</p>');
        },
    });
    // 修正变量名，和定义的变量保持一致
    all_reserve_datasets.addTo(map);
}
</script>
{% leaflet_map "gis" callback="window.our_layers" %}

这样修改后，Leaflet的弹窗里就能正常显示用户的真实名称啦！

内容的提问来源于stack exchange，提问作者Geoffrey Nyaga