Leaflet 重新创建 map 时 WMS 图层不显示

Question

我有一个 Flask python 应用程序，用户可以在 web 页面中 select 一辆车，根据选择的车辆，应用程序应在 Leaflet 层控件中建议不同的 WMS 层，用户可以根据需要勾选开/关。 根据车辆选择提供新层的逻辑是通过 ajax 完成的，其中层与车辆是从数据库中获取的。

This works fine the first time the vehicle is selected, however, when a different vehicle is selected and then the first vehicle again, the WMS layer does not show in the leaflet map, though the layer name can be selected in the layer control. 为了避免有太多的复选框，容器被添加到同一个标记组，所以用户只有容器组和几个 WMS 层来勾选开/关。

我确定解决方案非常简单。 然而，我已经用尽了在不同论坛上可以找到的“每一个”提示。

JavaScript：

var vesselVar = null;
var mapVessel = null;
var layerControl = null;
var baseMaps = null;
var overlayMaps = null;
var layerNameArr = null;
var layerLinkArr = null;
var baseMapArr = null;
var myVessels = null;
var sLayerName = null;
var sUrl = null;
var wmsOptions = null;
var myWmsLayer = null;

function myOnSelectedVessel() {
    let sSelectedVessel = $('#sSelectedVessel').find(":selected").text()
    if (sSelectedVessel.length > 0) {
        $.ajax({
            url: '/vessel_map_set_vessel_id',
            data: {
                'sSelectedVesselName': sSelectedVessel,
            },
            type: 'POST',
            dataType: 'json',
            success: function (response) {
                if (response.result) {
                    alert(response.msg);
                }
                myCreateOverlay(response.liVessels, response.liLastVesselPos, response.arrLeaflet.toString());
                myCreateBaseLayers();
                myCreateMap(response.lat, response.lon);
                mapVessel.panTo(new L.LatLng(parseFloat(response.lat), parseFloat(response.lon)));
            },
            error: function (error) {
                alert("error in function vessel_map.myOnSelectedVessel");
            }
        });
    }
}


function myCreateVesselGroup(liVessels, liLastVesselPos) {
    try {
        myVessels = null;
        vesselVar = null;
        myVessels = L.layerGroup([]);
        vesselVar = [];
        let iLen = liLastVesselPos.length;
        const arrVesselNames = liVessels.toString().split(',');
        const arrVesselPos = liLastVesselPos.toString().split(',');
        let iCntVesselPos = 0;
        for (let iCn7 = 0; iCn7 < iLen; iCn7++) {
            arrPos = liLastVesselPos[iCn7];
            //alert(arrVesselNames[iCn7]);
            myAddVesselMarker(arrVesselNames[iCn7], arrVesselPos[iCntVesselPos], arrVesselPos[iCntVesselPos + 1]);
            myVessels.addLayer(vesselVar[iCn7]);
            iCntVesselPos += 2;
        }
    }
    catch (err) {
        alert("Error in function myCreateBaseLayers: " + err.message);
    }
}


function myCreateOverlay(liVessels, liLastVesselPos, sLeafletWmsString) {
    try {
        if (mapVessel !== null) {

            if ((overlayMaps !== null) && (layerControl !== null)) {
                mapVessel.eachLayer(function (layer) {
                    mapVessel.removeLayer(layer);
                });
            }
        }
        overlayMaps = null;
        overlayMaps = {};
        myCreateVesselGroup(liVessels, liLastVesselPos)
        overlayMaps['Vessels'] = myVessels;

        if (sLeafletWmsString.length > 1) {
            const arrLeaflet2 = sLeafletWmsString.split(',')
            let iLen = arrLeaflet2.length;
            for (let iCnt4 = 0; iCnt4 < iLen; iCnt4 += 2) {
                sLayerName = null;
                sLayerName = arrLeaflet2[iCnt4].toString();
                wmsOptions = null;
                wmsOptions = {};
                wmsOptions.layers = sLayerName;
                wmsOptions.format = 'image/png';
                wmsOptions.transparent = true;
                wmsOptions.opacity = 0.5;
                sUrl = null;
                sUrl = arrLeaflet2[iCnt4 + 1];
                myWmsLayer = null
                myWmsLayer = new L.tileLayer.wms(sUrl, wmsOptions);
                overlayMaps[sLayerName] = myWmsLayer;
            }
        }
    }
    catch (err) {
        alert("Error in function myCreateOverlay: " + err.message);
    }
}


function myCreateBaseLayers() {
    try {
        layerNameArr = null;
        layerLinkArr = null;
        baseMaps = null;
        layerNameArr = [];
        layerLinkArr = [];
        baseMaps = []
        layerNameArr.push('OpenStreetMap');
        layerLinkArr.push(L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: 'OpenStreetMap', transparent: true }));
        for (iCn2 = 0; iCn2 < layerLinkArr.length; iCn2++) {
            baseMaps[layerNameArr[iCn2]] = layerLinkArr[iCn2];
        }
    }
    catch (err) {
        alert("Error in function myCreateBaseLayers: " + err.message);
    }
}


function myAddVesselMarker(sTitle, dLat, dLon) {
    try {
        var markerOptions = {};
        markerOptions.title = sTitle;
        markerOptions.clickable = true;
        markerOptions.draggable = false;
        var sPopupText = "Lat: " + dLat.toString() + ", Lon: " + dLon.toString();
        vesselVar.push(L.marker([dLat, dLon], markerOptions).bindPopup(sPopupText));
    }
    catch (err) {
        alert("Error in function myAddVesselMarker: " + err.message);
    }
}


function myCreateMap(dLatCenter, dLonCenter) {
    try {
        if (mapVessel !== null) {
            mapVessel.invalidateSize();
            mapVessel.off();
            mapVessel.remove();
        }
        mapVessel = null;
        layerControl = null;
        mapVessel = new L.map('map', { center: [dLatCenter, dLonCenter], zoom: 13, layers: [layerLinkArr[0]] });
        layerControl = new L.control.layers(baseMaps, overlayMaps).addTo(mapVessel);
    }
    catch (err) {
        alert("Error in function myCreateMap: " + err.message);
    }
}

Answer 1

对于遇到同样问题的任何其他人。 我的问题是 url 字符串中的 '&' 字符是一个 javascript 实体字符，它被解释为 javascript 代码（即使 url 字符串是可变的，而不是 JS 代码本身）。 对于第一次加载绘制，我使用了 Flask 的 Jinja2，它会自动修改 url 字符串中的所有“&”字符，因此第一次绘制显示正常。 一旦我将 ajax 字符串中的所有“&”字符替换为“&”，我在用户更换车辆时将其发送回 javascript，当我更换车辆时，叠加层也会出现。