Question

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

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

在这个脚本中，程序读取一个简单的txt（每个坐标的坐标和一个id），然后转换成一个数组。之后，它开始重复每对坐标:( text [“features”]。forEach（function（feature）{....）

在此重复中，计算出一个简单的天空百分比。这个天空的百分比是可变的“每”。我希望这个可变的“per”保存在数组属性中的可变“z”中。如果您转到console-＆gt; object-＆gt; features-＆gt; 0-＆gt;属性，则存在此可变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 ：For，foreach，while，do while中有4个循环语句。和递归！

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中重复数组？

2 个答案: