我如何在 Javascript 的数组中重复？

Question

我有一个简单的问题，但很难解释..请帮助我！！我在 JsFiddle 中有一个脚本：

https://jsfiddle.net/irinikonsta/b4t9hspj/

在此脚本中，程序读取一个简单的 txt（包含坐标和每对坐标的 id）并将其转换为一个数组。之后，它开始为每对坐标重复：( text["features"].forEach(function(feature) {....)

在这个重复中，计算了一个简单的天空百分比。这个天空的百分比是变量"per"。我希望将此变量 "per" 保存在数组属性中的变量 "z" 中。如果您转到控制台->对象->功能->0->属性，则此变量 z 存在。但是如果你在 0 点、1 点等处看到这个变量不会根据它的坐标改变。你知道为什么吗？我附上了 txt 文件，因为你必须自己上传它。请帮助我这非常重要..非常感谢你祝你有美好的一天！ txt文件：

{
"displayFieldName": "",
"fieldAliases": {
    "FID": "FID",
    "Id": "Id",
    "Longtitude": "Longtitude",
    "Latitude": "Latitude"
},
"geometryType": "esriGeometryPoint",
"spatialReference": {
    "wkid": 4326,
    "latestWkid": 4326
},
"fields": [{
    "name": "FID",
    "type": "esriFieldTypeOID",
    "alias": "FID"
}, {
    "name": "Id",
    "type": "esriFieldTypeInteger",
    "alias": "Id"
}, {
    "name": "Longtitude",
    "type": "esriFieldTypeDouble",
    "alias": "Longtitude"
}, {
    "name": "Latitude",
    "type": "esriFieldTypeDouble",
    "alias": "Latitude"
}],
"features": [{
    "attributes": {
        "FID": 0,
        "Id": 1,
        "Longtitude": 23.739000000000001,
        "Latitude": 37.972000000000001
    },
    "geometry": {
        "x": 23.739000000000001,
        "y": 37.972000000000001
    }
}, {
    "attributes": {
        "FID": 1,
        "Id": 2,
        "Longtitude": 23.760100000000001,
        "Latitude": 37.984999999999999
    },
    "geometry": {
        "x": 23.760100000000001,
        "y": 37.984999999999999
    }
}, {
    "attributes": {
        "FID": 2,
        "Id": 3,
        "Longtitude": 23.749199999999998,
        "Latitude": 37.975999999999999
    },
    "geometry": {
        "x": 23.749199999999998,
        "y": 37.975999999999999
    }
}, {
    "attributes": {
        "FID": 3,
        "Id": 4,
        "Longtitude": 23.735700000000001,
        "Latitude": 37.975999999999999
    },
    "geometry": {
        "x": 23.735700000000001,
        "y": 37.975999999999999
    }
}]
}

Answer 1

使用For Each或for循环重复Javascript

中的数组

for each (variable in object) {
    // statement(s) to run
}

Javascipt 中有 4 个循环语句：For、foreach、while、do while。和递归！

Answer 2

您需要了解的第一个问题是，您想运行在同步操作 (forEach) 中进行异步操作（从 gmaps 下载图像）。您可以通过多种方式实现这一点，在我的代码中，我使用 callbacks，逻辑是我运行并行异步操作，当每个操作完成时，我得到结果并将其放入数组中。

但主要问题是您的数据不知何故是错误的。您创建的所有链接都指向 image。是的，没有图像...

你的坐标指向海中央！ Check for your self

但是如果你用

交换它们

let y = feature["attributes"].Longtitude; let x = feature["attributes"].Latitude;

现在这些坐标指向雅典的中心:)

function getBase64FromImageUrl(url, callback) {
  var img = new Image();
  var range = 60;
  var finalZ;
  img.setAttribute('crossOrigin', 'anonymous');

  img.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0);
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);


    //console.log("imageData",imageData);
    //var dataURL = canvas.toDataURL("image/png");
    var index = (150 * imageData.width + 150) * 4;
    var red = imageData.data[index];
    var green = imageData.data[index + 1];
    var blue = imageData.data[index + 2];
    var alpha = imageData.data[index + 3];
    console.log(red);
    console.log(green);
    console.log(blue);
    var rangedRB = red - range;
    var rangedGB = green - range;
    var rangedBB = blue - range;

    var rangedRT = red + range;
    var rangedGT = green + range;
    var rangedBT = blue + range;

    var data = imageData.data;
    var counter = 0;
    for (var i = 0; i < data.length; i += 4) {
      var red1 = data[i];
      var green1 = data[i + 1];
      var blue1 = data[i + 2];
      if ((red1 < rangedRT && red1 > rangedRB) && (green1 < rangedGT && green1 > rangedGB) && (blue1 < rangedBT && blue1 > rangedBB)) {
        counter = counter + 1;
        var p = data.length / 4;
        var pe = counter / p;
        var per = pe * 100;
        finalZ = per;
      }
    }
    console.log(url);
    console.log("counterFinal", counter);
    console.log("data.length", data.length / 4);
    console.log("percentage:", (counter / (data.length / 4)) * 100);

    //console.log(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    // alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));

    callback(finalZ);
  };

  img.src = url;
}

function openFile(event) {
  console.log('openfile', event);
  var input = event.target;

  var reader = new FileReader();
  reader.onload = function() {
    var text = JSON.parse(reader.result);
    console.log(reader.result.substring(0, 200));

    var results = 0;
    text["features"].forEach(function(feature) {

      //y is the Longtitude
      //x is the Latitude
      //because data are wrong!
      let y = feature["attributes"].Longtitude;
      let x = feature["attributes"].Latitude;

      let myString1 = `https://maps.googleapis.com/maps/api/streetview?location=${x},${y}&size=300x300&pitch=90`;
      getBase64FromImageUrl(myString1, function(finalZ) {
        feature["attributes"].z = finalZ;
        results++;
        if (results == text["features"].length) {
          console.log(text);
        }
      });



    });


  };
  reader.readAsText(input.files[0]);
}

<input type='file' accept='text/plain' onchange='openFile(event)'>
<br>
<img id='output'>

我如何在 Javascript 的数组中重复？

How can i repeat in an array in Javascript?

javascript

arrays

object

coordinates

jsfiddle