Question

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

我希望我的应用程序能够接受各种数据集并能够在地图上显示它们，只需极少的编程更改。这是一个新的需求，我改变了我以前的代码，但它不是最佳的。

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

如您所见，左侧的图例不会选择唯一值，而右侧的图例可以正常工作。出于某种原因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);

避免使用全局变量？

没有正确使用JS / Leaflet函数的大型数据集

1 个答案: