Django-Leaflet按需加载GeoJSON图层问题求助

我来帮你搞定这个问题！你现在的核心问题是map:init事件只会在页面加载、地图初始化完成时触发一次，而你在Ajax回调里调用displayModelArea的时候，这个事件早就已经触发过了，所以里面的代码根本不会执行。咱们来一步步调整代码：

关键问题分析 #

你的displayModelArea函数里依赖map:init事件获取地图实例，但这个事件仅在地图首次渲染时触发。当用户切换下拉框发起Ajax请求时，地图已经初始化完成，事件不会再次触发，导致新的GeoJSON无法添加到地图上。

修改后的完整代码 #

HTML模板部分（主要调整script代码）

<html>
<head>
    {% load leaflet_tags %}
    {% leaflet_css %}
    {% leaflet_js %}
    <style>
        #mapid { width: 870px; height: 530px; }
    </style>
</head>
<body>
    <div>{% leaflet_map "mapid" %}</div>
    <form id="aoi-form" method="post" action="">
        {% csrf_token %}
        <select id="aoi-choice" name="modelarea_sel_name">
            {% for aoi in modelarea.aois.field.choices %}
                <option>{{aoi|title}}</option>
            {% endfor %}
        </select>
    </form>

    <script type="text/javascript">
        $(document).ready(function() {
            // 设置CSRF Token
            setCSRFToken();
            
            // 全局保存地图实例，避免重复监听事件
            let mapInstance = null;
            // 保存GeoJSON图层实例，方便后续清除
            let geoJsonLayer = null;

            // 地图初始化完成时保存实例
            window.addEventListener("map:init", function(event) {
                mapInstance = event.detail.map;
            });

            function displayModelArea(data) {
                // 如果已有图层，先移除避免叠加
                if (geoJsonLayer) {
                    mapInstance.removeLayer(geoJsonLayer);
                }
                // 创建新的GeoJSON图层并添加到地图
                geoJsonLayer = L.geoJson(data, {
                    onEachFeature: function(feature, layer) {
                        layer.bindPopup(feature.properties.name);
                    }
                }).addTo(mapInstance);
            }

            $('#aoi-choice').on('change', function(e) {
                var selecteditem = $(this).find("option:selected").val();
                $.ajax({
                    url: $("#aoi-form").attr("action"),
                    type: $("#aoi-form").attr("method"),
                    data: {"aoi-choice": selecteditem},
                    success: function(response) {
                        // 注意：后端返回的是GeoJSON字符串，需要解析成JSON对象
                        const geoJsonData = JSON.parse(response);
                        displayModelArea(geoJsonData);
                    },
                    error: function(xhr, errmsg, err) {
                        console.error('加载数据失败:', errmsg);
                    }
                });
            });
        });
    </script>
</body>
</html>

views.py部分（确认返回格式正确）

def rsmgui_home(request):
    template_name = 'rsmgui_nav.html'
    if request.POST.get("aoi-choice"):
        # 序列化GeoJSON，返回字符串
        polydata = serialize('geojson', ModelArea.objects.filter(name=request.POST.get("aoi-choice")))
        # safe=False允许返回非字典类型的JSON（这里是字符串）
        return JsonResponse(polydata, safe=False)
    # 处理GET请求，返回页面
    return render(request, template_name)

核心改动说明 #

• 保存地图实例：在map:init事件触发时，把地图实例保存到全局变量mapInstance中，后续直接复用这个实例，不用再监听事件。
• 管理GeoJSON图层：新增geoJsonLayer变量保存当前的GeoJSON图层，每次加载新数据前先移除旧图层，避免地图上叠加多个要素。
• 解析JSON数据：后端返回的是序列化后的GeoJSON字符串，前端需要用JSON.parse()转换成JavaScript对象才能被Leaflet识别。
• 移除无效事件监听：displayModelArea函数直接使用已有的mapInstance，不再依赖仅触发一次的map:init事件。

这样调整后，用户切换下拉框时，Ajax获取到的GeoJSON就能正确加载到地图上啦！

内容的提问来源于stack exchange，提问作者Ava Trimble