Question

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

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

我现在的代码遍历数据集以将颜色分配给特定值，但它也循环遍历数据集以提取唯一值，以便我可以在图例中使用它们。

这会导致我的应用程序在循环中出现循环，从而产生不必要的计算。这对于小型数据集来说没有问题，19个记录x19是可行的，但是8062x8062 ......

getColor()函数中的for循环是问题所在。我尝试将for循环重定位到一个新函数（getColor v2），但我总是丢失arrayMetKetens。我认为getColor()在getArray()之前运行可以返回它的值，但是因为很多函数在我选择一个表后开始运行，所以我不能强迫getArray()更快地返回它。或者有吗？

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

window["mapDataLayer"] = L.geoJson(geojson_dataTable, {
    pointToLayer: function (feature, latlng) {
        var markerStyle = { 
            fillColor: getColor(feature.properties.Fastfoodketen),
            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.Naam),
            color: "grey",
            weight: 5,
            opacity: 1
            };
         }
         else{
             return null;
         }
         return polygonStyle;
     }
}).addTo(map);

getColor函数：

function getColor(keten) {
    checkTable();
    var ketens = [];

    for(i=0;i<(geojson_dataTable.features).length;i++){
        ketens = ketens.concat(Object.byString(geojson_dataTable, 'features['+i+'].properties.'+featureVoorSorteer))
    }
    console.log(ketens);
    arrayMetKetens = (jQuery.unique( ketens ));
    var i = arrayMetKetens.indexOf(keten);

    if (i !== -1) {
        return arrayKleur[ i ];
        } 
    else {
        return '#999999';
    } 
}

getColor v2：

function getArray(){
    var ketens = [];
    for(i=0;i<(geojson_dataTable.features).length;i++){
        ketens = ketens.concat(Object.byString(geojson_dataTable, 'features['+i+'].properties.'+featureVoorSorteer))
        console.log(ketens);
    }
    arrayMetKetens = (jQuery.unique( ketens ));
    return arrayMetKetens.
}

function getColor(keten) {
    checkTable();
    getArray();
    yMetKetens.indexOf(keten);
    if (i !== -1) {
        return arrayKleur[ i ];
        } 
    else {
        return '#999999';
    } 
    console.log("hij doet het")
}

Answer 1

首先，如果你不介意我评论JS编程风格，这段代码就是......好吧......远非完美:-)特别是全局变量的间接使用使得它变得棘手读。我会试着尝试一下，并提出一些并不意味着重写整个事情的事情。

我会在功能中使用全局变量，即使它通常被认为是反模式。

首先 - 如果您提交的代码是＆＃34; getColor v2＆＃34;是ACTUAL代码，然后是一个明显的错误：

function getColor(keten) {
    checkTable();
    getArray();
    //yMetKetens.indexOf(keten);<-- looks like partialy copied code :-)
    // SHOULD BE THIS:
    var i = arrayMetKetens.indexOf(keten);
    if (i !== -1) {
        return arrayKleur[ i ];
        } 
    else {
        return '#999999';
    } 
    console.log("hij doet het")
}

修复该问题后，每当我们拨打getArray()时，我们仍然可以拨打getColor()。但首先让我们看一下getArray()的略微改进的版本：

function getArray(){
    var ketens = [];
    //for(i=0;i<(geojson_dataTable.features).length;i++){
    //    ketens = ketens.concat(Object.byString(geojson_dataTable, 'features['+i+'].properties.'+featureVoorSorteer))
    //    console.log(ketens);
    //}
    //THE CODE ABOVE CAN BE SIMPLY EXPRESSED AS
    for(i=0;i < geojson_dataTable.features.length;i++){
       ketens = keten.concat(geojson_dataTable.features[i].properties[featureVoorSorteer])
    }
    //lets use global variable arrayMetKetens explicitly 
    window.arrayMetKetens = jQuery.unique( ketens );
    //return arrayMetKetens <-- we never use the return value of the function anyway...

}

现在我们可以稍微修改我们的函数getColor()：

function getColor(keten) {
    checkTable();
    //getArray(); <--REMOVE CALL TO getArray()
    var i = window.arrayMetKetens.indexOf(keten);//<-- explicit use of global variable we initialise in getArray()
    if (i !== -1) {
        return arrayKleur[ i ];
        } 
    else {
        return '#999999';
    } 
    console.log("hij doet het")
}

我们要做的最后一件事就是在我们手头有getArray()个对象时立即调用geojson_dataTable。您提交的代码没有该部分，因此请将其放在此处：

getArray();//<-- calling getArray() here will initialise (once) the array arrayMetKetens 
           //    which then can be used in the function getColors()
window["mapDataLayer"] = L.geoJson(geojson_dataTable, {
    pointToLayer: function (feature, latlng) {
        var markerStyle = { 
            fillColor: getColor(feature.properties.Fastfoodketen),
            color: "#696969",
            fillOpacity: 0.6,
            opacity: 0.9,
            weight: 1,
            radius: 8
        };

这很有趣！ :-)我希望它有帮助...; - ）

JavaScript中的意外双循环

1 个答案: