Large dataset not using JS/Leaflet functions correctly

问题

I've built an application wherein you can select a table in a database and then show the data on a Leaflet map. The data has a matching legend.

I want my application to accept a variety of datasets and be able to display them on the map, with minimal programming alterations. This is a new demand and I've altered my previous code, but it's not optimal.

One of my datasets is pretty large, 8000+ record with multipolygons and many column. When adding this dataset to the map, it takes some time to load (not really a problem). The matching legend isn't working quite how it should. It returns colors, which is good, but it's showing all values instead of the unique values. All the other datasets, which are smaller, or have points instead of polygons, work perfectly fine.

As you can see, the legend on the left doesn't pick the unique values, whereas the legend on the right works fine. For some reason arrayMetKetens is not filled with unique values, but rather it's filled with all the values. When I console.log(arrayMetKetens), it just gives all the values. Why is this?

The color will repeat because these come from an array wherein the colors are defined. I'm still looking for a way to "repeat" the array, but this has a lower priority.

arrayKleur:

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

Code for legend:

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);
    }
}

Code for adding color to markers/polygons:

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:

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

checkTable variable:

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:

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 );
}

回答1:

I think your sequence of events here is a bit mis-ordered. You call checkTable() after getArray()

getArray();
checkTable();

yet getArray depends on featureVoorSorteer being available. Not only that, getArray seems to depend on a global featureVoorSorteer Why don't you do something like

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

to avoid using globals?

来源：https://stackoverflow.com/questions/38100320/large-dataset-not-using-js-leaflet-functions-correctly

标签

javascript

leaflet