javascript - 大型数据集未正确使用 JS/Leaflet 功能

Question

我构建了一个应用程序，您可以在其中选择数据库中的一个表，然后在 Leaflet map 上显示数据。数据具有匹配的图例。

我希望我的应用程序能够接受各种数据集并能够将它们显示在 map 上，并且只需对编程进行最少的改动。这是一个新的需求，我已经改变了我以前的代码，但它不是最优的。

我的一个数据集非常大，有 8000 多条包含多面体和许多列的记录。将此数据集添加到 map 时，加载需要一些时间(不是真正的问题)。匹配的图例没有按应有的方式工作。它返回颜色，这很好，但它显示所有值而不是唯一值。所有其他较小的数据集，或者具有点而不是多边形的数据集，都可以正常工作。

如您所见，左侧的图例没有选择唯一值，而右侧的图例工作正常。出于某种原因，arrayMetKetens 没有填充唯一值，而是填充了所有值。当我 console.log(arrayMetKetens) 时，它只提供所有值。 这是为什么？

颜色会重复，因为它们来自一个数组，其中定义了颜色。我仍在寻找一种“重复”数组的方法，但这具有较低的优先级。

arrayKleur:

arrayKleur = ["#b15928", "#6a3d9a", "#ff7f00", "#e31a1c", "#33a02c", "#1f78b4", "#a6cee3", "#b2df8a", "#fb9a99", "#fdbf6f","#b15928", "#6a3d9a", "#ff7f00", "#e31a1c", "#33a02c", "#1f78b4", "#a6cee3", "#b2df8a", "#fb9a99", "#fdbf6f"];

图例代码:

function legenda(){
    var HTMLlegenda = '<h4>Legenda</h4>'

    // if arrayMetKetens is empty => default legenda text 
    if (arrayMetKetens.length == 0 ){
        HTMLlegenda += '<p>Selecteer een tabel in de "Advanced selection" tab om de legenda weer te geven</p>'

        $("#tab1").html(HTMLlegenda);
    }
    // if arrayMetKetens is filled => generate legenda
    else{

        $("#tab1").html(arrayMetKetens);

        for(ii = 0; ii < arrayMetKetens.length; ii++){

            HTMLlegenda += '<i id="background" style="background:'+arrayKleur[ii]+'">&nbsp;&nbsp;&nbsp;&nbsp;</i>'+arrayMetKetens[ii]+'</br>'
        }
        $("#tab1").html(HTMLlegenda);
    }
}

为标记/多边形添加颜色的代码:

getArray();
checkTable();
window["mapDataLayer"] = L.geoJson(geojson_dataTable, {
    pointToLayer: function (feature, latlng) {
        var markerStyle = { 
            fillColor: getColor(feature.properties[featureVoorSorteer]),
            color: "#696969",
            fillOpacity: 0.6,
            opacity: 0.9,
            weight: 1,
            radius: 8
        };
        return L.circleMarker(latlng, markerStyle);
    },

     style: function (feature){
         if(feature.geometry.type === 'MultiPolygon'){
             var polygonStyle = {
            fillColor: getColor(feature.properties[featureVoorSorteer]),
            color: "grey",
            weight: 5,
            opacity: 1
            };
         }
         else{
             return null;
         }
         return polygonStyle;
     }
}).addTo(map);

getColor 函数:

function getColor(keten) {
    var i = window.arrayMetKetens.indexOf(keten);
    if (i !== -1) {
        return arrayKleur[ i ];
        } 
    else {
        return '#999999';
    } 
}

checkTable 变量:

function checkTable(){
    var e = document.getElementById("slctTable");
    var strUser = e.options[e.selectedIndex].value;
    if(strUser == "fastfood_groningen"){
        featureVoorSorteer = "Fastfoodketen"
    }
    else if(strUser == "wijkindeling_groningen"){
        featureVoorSorteer = "Naam"
    }
    else if(strUser == "panden_vbo_loppersum"){
        featureVoorSorteer = "Bouwjaar"
    }
    else {
        featureVoorSorteer = "";
        console.log("featureVoorSorteer is leeg, geen juiste selectie 'select table'")
    }
    return featureVoorSorteer;
}

getArray 函数:

function getArray(){
    var ketens = [];
    for(i=0;i < geojson_dataTable.features.length;i++){
       ketens = ketens.concat(geojson_dataTable.features[i].properties[featureVoorSorteer])
    }
    window.arrayMetKetens = jQuery.unique( ketens );
}

Answer 1

我认为您这里的事件顺序有点错误。你在 getArray() 之后调用 checkTable()

getArray();
checkTable();

然而 getArray 取决于 featureVoorSorteer 是否可用。不仅如此，getArray 似乎依赖于一个全局的featureVoorSorteer你为什么不做类似的事情

var featureVoorSorteer = checkTable();
getArray(featureVoorSorteer);

避免使用全局变量？