外部PHP变量传入HTML script标签供Leaflet地图使用问题排查

• 核心逻辑错误：表单设置了target='resultsFrame'，点击按钮后PHP返回的内容会加载到对应iframe内，iframe的JS作用域和父页面完全隔离，父页面运行的Leaflet代码永远拿不到iframe里定义的filterlist变量。
• 变量类型错误：PHP输出JS时给filterlist套了双引号，json_encode生成的数组结构会被包裹成普通字符串。字符串的includes()方法是匹配子串，和数组按元素精确匹配的逻辑完全不一致，就算变量能跨作用域拿到，过滤功能也会失效。
• 执行顺序错误：页面初始化时GeoJSON请求就已经触发，filter函数在数据加载阶段就执行完毕，就算后续拿到了filterlist的值，已经渲染完的图层不会自动重新执行过滤。
• 图层逻辑错误：原代码在pointToLayer回调里直接往markerCluster集群加图层，pointToLayer会对所有GeoJSON要素执行，不受filter返回值控制，会直接导致过滤规则失效。

1. 去掉表单的iframe跳转逻辑，改用AJAX请求获取PHP返回的过滤ID列表，避免跨作用域变量取不到的问题。
2. 修正PHP返回格式，不要输出<script>标签，直接返回标准JSON格式数据。
3. 调整JS执行顺序：等拿到过滤ID列表之后，再加载GeoJSON数据，每次查询后清空旧图层重新渲染，保证过滤规则生效。
4. 修正图层加载逻辑，把集群添加逻辑放到onEachFeature回调中，只有通过过滤的要素才会被加入集群。

修正后的searchDataset.php代码 #

<?php
// 用完整<?php标签，避免服务器未开短标签支持导致代码失效
$UniqueIDsPass = ['Dane_5802790', 'Dane_5803376', 'Dane_5803377', 'Dane_5803025', 'Dane_5778080'];
// 设置JSON响应头，直接返回数据，不输出script标签
header('Content-Type: application/json');
echo json_encode($UniqueIDsPass);
exit;
?>

修正后的HTML/JS代码 #

<html>
<head>
    <meta charset="utf-8">
    <title>Testing Web Mapping</title>
    <link rel="stylesheet" href="leaflet/leaflet.css" />
    <link rel="stylesheet" href="leaflet/MarkerCluster.css" />
    <link rel="stylesheet" href="leaflet/MarkerCluster.Default.css" />
    <link rel="stylesheet" href="tabcontent.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="moveitems2.js"></script>
    <script src="leaflet/leaflet.js"></script>
    <script src="leaflet/leaflet-ui.js"></script>   
    <script src="leaflet/leaflet.ajax.min.js"></script>
    <script src="leaflet/leaflet.markercluster.js"></script>
</head>
<body>
<div>
<div id="map" style="width:700px; height: 850px"></div>
</div>
<form id="FilterForm" method="post">
    <!-- 按钮设为button类型，避免触发表单默认提交 -->
    <button type="button" id="searchBtn" onclick="listboxSelectAll();">Search Button</button>
</form>

<script type="text/javascript">                        
    var map = L.map('map',{
        center:[44.4340101, -90.0139754], 
        zoom:7
    });
    var usgs = L.tileLayer.wms("http://basemap.nationalmap.gov/ArcGIS/services/USGSImageryOnly/MapServer/WMSServer", {
        layers:'0', 
        format: 'image/png', 
        transparent: true, 
        attribution: "USGS"
    }).addTo(map);
                            
    var PointsStyle = {
        "radius": 4,
        "color": "#fb0f04", 
        "fillColor": "#fb0f04",
        "weight": 1,
        "opacity": 1,
        "fillOpacity": 0
    };

    // 初始化全局变量，避免未定义报错
    let filterlist = [];
    var markers = L.markerClusterGroup().addTo(map);
    var Sale_points = null;
    var Sale_polys = null;
                            
    function FilterSales(layer) {
        return filterlist.includes(layer.properties.UniqueID)
    }

    // 封装地图数据加载逻辑，拿到过滤ID后再调用
    function loadMapData() {
        // 清空之前加载的旧图层
        if(Sale_points) map.removeLayer(Sale_points);
        if(Sale_polys) map.removeLayer(Sale_polys);
        markers.clearLayers();

        Sale_points = L.geoJSON.ajax('GIS/Sales_points_geojson.geojson', {
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, PointsStyle);
            }, 
            filter: FilterSales,
            onEachFeature: function(feature, layer) {
                // 只有通过过滤的要素才会加入集群
                markers.addLayer(layer);
            }
        }).addTo(map);

        Sale_polys = L.geoJSON.ajax('GIS/Sales_polygons_geojson.geojson', 
            {style: PolygonsStyle, onEachFeature: SalesTooltips, filter: FilterSales}).addTo(map);
    }

    // 绑定按钮点击请求逻辑
    $('#searchBtn').on('click', function() {
        $.ajax({
            url: 'searchDataset.php',
            method: 'POST',
            dataType: 'json', // 自动将返回的JSON解析为JS数组
            success: function(res) {
                filterlist = res;
                loadMapData(); // 拿到过滤条件后刷新地图数据
            },
            error: function() {
                alert('过滤条件查询失败，请重试');
            }
        })
    })
                            
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Brandon Moore