javascript - 基于Arrays动态创建Leaflet Layers时页面保持运行

Question

问题 --> 我的页面似乎处于无限循环之类的。它一直在加载，但我没有收到错误

目标 --> 根据 JSON 字段中的 id，我创建一个类型数组。我还创建了 2 个单独的数组(1 个用于图层，1 个用于颜色)。

我想为每种类型创建 1 个图层，并为其标记指定独特的颜色。

流程:我使用以下内容声明我的 3 个数组:

var typeArray = [];
var colorArray = [];
var layerArray = [];'

之后，我将检查 JSON 文件在分类 ID 上的输出并填充工作正常的类型数组。我已记录要验证的值

for( var i=0; i < jData.length; i++){
        if(typeArray.includes(jData[i].classificationid)){
            console.log(jData[i].classificationid + " is in array");
        }
        else{
            typeArray.push(jData[i].classificationid);
        }
    }

之后，我迭代该类型，创建一个颜色和图层数组。颜色数组和函数运行良好。我已经验证过了。

for(var i = 0; i<typeArray.length; i++){
        colorArray[i] = getRandomRgb();
        layerArray[i] = L.layerGroup();
    }

因此，基于此，我假设如果我有 2 种类型的分类，我将有一个包含 2 个图层组的 LayerArray。 (对象数组)

在下面的代码中，我迭代整个 JSON，其中通过 typeArray 嵌套迭代。如果类型数组与分类匹配，我会向相应的图层添加一个 div 图标。console.log(jData[i].classificationid + "matches "+ typeArray[j]);向控制台提供正确的输入，之后我在控制台中看不到其他内容

for(var i=0; i < jData.length; i++){
        console.log("I = " + i);

        for(var j=0; i<typeArray.length; j++){
            if(jData[i].classificationid == typeArray[j]){
                console.log(jData[i].classificationid + "   matches    " + typeArray[j]);

                L.marker([jData[i].latitudey, jData[i].longitudex],{
                icon: L.divIcon({
                    html: '<i id ="icon1" class="fas fa-map-marker" style="font-size:48px;color:rgb(225, 80, 71)"></i>',
                    iconSize: [20, 20],
                    className: 'myDivIcon'
                })
            }).bindPopup(jData[i].addresscode).addTo(layerArray[j]);


            }
        }

我认为这段代码中的某个地方是我的问题所在。

问题 1 - 标记未添加到 layerArray 中问题 2 - 我不知道如何根据 colorArray 更改 HTML rgb 样式。

请帮忙:(

Answer 1

我认为你的循环卡在这里:

for(var j=0; i<typeArray.length; j++){

应该是

for(var j=0; j<typeArray.length; j++){