Question

我正在研究javascript和传单地图以创建这样的东西：我在屏幕上有一个地图，在地图上应该是箭头形状的多个多边形，以根据地图上的变化数据进行旋转。问题是当我在javascript中添加警报时javascript工作正常，但如果没有，那么箭头只显示在最后一个位置的屏幕上，在这种情况下没有动作。我试图将代码放在window.onload中，但它仍然无法正常工作。它只有在我有警报时才有效。

数据输入来自json文件。另外，在我开始使用leaflet multipolygon而不是geojson polygon之前，我没有这个问题。

以下是我的代码。我可以提供所需的任何其他细节。谢谢你的帮助！

window.onload = function () {

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/4fd891040a8a4ecb805c388019e23d46/64082/256/{z}/{x}/{y}.png';

var basemap = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
var latlng = new L.LatLng(30, -88);
var delay = 350;        // animation delay (larger is slower)
var Npoints;        // number of points per track
var isRunning = true;
var multiPolygon = [];
var pts =[];
var arrowSize = [];
var arrowAngle = [];
var arrowsDataMap = new Map();
var pointLength;
var arrowLength;

function showTimeStep(p) {
    var point = [];
    var latLngPoints = [];

    //for loop to create one layer of multipolygons
    for (var j = 0; j < arrowLength; j++) {
        alert(arrowLength);
        for (var m = 0; m < pointLength; m++) {     
            if(j>0)
                map.removeLayer(multiP);

            parts.push(0.00);
            //some code to create polygon
            parts.push(0.00+size/3);

            var combined = parts.join(" ");
            var a = combined.split(":");
            var ans = [];
            for(var k=0;k<a.length;k++){
                var latLong = a[k].split(",");
                ans.push([ parseFloat(latLong[0]), parseFloat(latLong[1]) ]);
            }

            domain = {"type": "Polygon", "coordinates": [ans]}; 

            var sine = Math.sin(-angle);
            var cos = Math.cos(-angle);

            for (var i=0;i<ans.length;i++){
                var px=ans[i][0];
                var py=ans[i][1];

                //rotate
                var xnew = (px*cos)-(py*sine);
                var ynew = (px*sine)+(py*cos);

                //translate
                px=((xnew+latLngPoint[0]));
                py=((ynew+latLngPoint[1]));
                ans[i][0]=px;
                ans[i][1]=py;

                //polygon
                point[i] = L.latLng(py,px);
            }
            //Array of multipolygons
            multiPolygon[m] = point;
        }

        var multiP = L.multiPolygon(multiPolygon);
        map.addLayer(multiP); //Plotting polygon on the map

        if (p == arrowLength) {
            nextp = (p + 1) % Npoints;
            setTimeout(function(i) {
                return function() {
                    showTimeStep(i);
                }
            }(nextp), delay);
        }
    }
}

//function to load data from json file and create map
function animateLines(data) {
    pointLength = data.points.length;
    arrowLength = data.points["0"].point.length;

    for (var viewEntryKey in data.points) {
        var arrowsMap = new Map();
        for (var i = 0; i < data.points[viewEntryKey].point.length; i++) {
            var arrowMap = new Map();

            arrowMap.set(1,data.points[viewEntryKey].point[i].latLng);
            arrowMap.set(2,data.points[viewEntryKey].point[i].size);
            arrowMap.set(3,data.points[viewEntryKey].point[i].angle);

            arrowsMap.set(i,arrowMap);
        }

        arrowsDataMap.set(viewEntryKey,arrowsMap);
    }

    showTimeStep(0);
}

var tracks = L.layerGroup([])
var map = new L.Map('map', {center: latlng, zoom: 7, layers: [basemap, tracks]});
map.addControl(new MyButton({layer: tracks}));

var tracklines = null;

//json file holding data
var url1 = "pointsData.json";
$.getJSON(url1, function(mydata) {
    tracklines = mydata;
    //$.each(mydata.points.point,function(index,value){ alert(value.size);})
})
.fail(function(xhr, statustext) { 
    tracklines = JSON.parse(xhr.responseText.replace(/NaN/g,'null'));
})
.done(function() {
    // assume all lines have the same number of points
    Npoints = 301;
    animateLines(tracklines);
});
};

Json（它有点粗糙，因为数据被复制并且可以更好地构建）：

     {
  "points": [
  {
    "point": [
      {
        "latLng": [-88.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.79"
      },
      {
        "latLng": [-88.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.69"
      }
      ,
      {
        "latLng": [-88.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.49"
      }
    ]
  },
  {
    "point": [
      {
        "latLng": [-89.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.79"
      },
      {
        "latLng": [-89.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.69"
      }
      ,
      {
        "latLng": [-89.9999988477954, 29.999999681521295],
        "size": "0.15",
        "angle": "0.49"
      }
    ]
  }
  ]
}

Answer 1

我不确切地知道问题的原因是什么。但是......

始终使用console.log而不是alert()

alert正在大幅改变代码的时间安排，而console.log应该或多或少保持中立。

首先，您必须确定时序/异步问题是由JSON加载还是setTimeout调用引起的。您可以删除alert并放置一些控制台日志消息，运行程序并分析输出。使用delay进行游戏，例如将其设置为3秒或3毫秒，看看行为如何变化。

BTW看起来你似乎没有JavaScript的经验，例如你没有犯错在循环中创建函数，但用匿名函数包装它 - 干得好！由于我不知道你的JSON数据的结构，也许我错了，但是使用像“0”这样的字符串来访问这些点看起来有点像它实际上是一个数组然后我会对待一个数组（参见{ {1}}）。只是一个可能错误的想法......

Answer 2

问题在于运行两个for循环。循环“for（var j = 0; j＆lt; arrowLength; j ++）”实际上不是必需的，并且是创建问题的那个。

带有传单-javascript代码的Javascript无法正常工作

2 个答案: