将线串添加到mapobx地图，json文件中的坐标

Question

我写这个函数是为了得到LONG和LAT。原因是JSON中的"the_geom“字段也有高程，这是我不需要的。console.log只是用于验证目的。我会将其替换为return，或者将输出保存在变量中。

​

function getCoords() {
  for (var i = 0; i < offpistes.length; i++) {
    if (offpistes[i].the_geom !== null) {
      for (var j = 0; j < offpistes[i].the_geom.coordinates.length; j++) {
        for (var k = 0; k < offpistes[i].the_geom.coordinates[j].length; k++) {
          console.log('long: ' + offpistes[i].the_geom.coordinates[j][k][0]);
          console.log('lat: ' + offpistes[i].the_geom.coordinates[j][k][1]);
        }
      }
    }
  }
}

​

我在mapbox docs中找到了这段代码，但我不知道如何为我的每个行字符串添加坐标。此外，迭代for循环需要很长时间。有什么更好的方法可以做到这一点呢？

​

function addLine() {
  map.on('load', function() {
    map.addLayer({
      "id": "route",
      "type": "line",
      "source": {
        "type": "geojson",
        "data": {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [-122.48369693756104, 37.83381888486939],
              [-122.48348236083984, 37.83317489144141],
              [-122.48339653015138, 37.83270036637107],
              [-122.48356819152832, 37.832056363179625],
              [-122.48404026031496, 37.83114119107971],
              [-122.48404026031496, 37.83049717427869],
              [-122.48348236083984, 37.829920943955045],
              [-122.48356819152832, 37.82954808664175],
              [-122.48507022857666, 37.82944639795659],
              [-122.48610019683838, 37.82880236636284],
              [-122.48695850372314, 37.82931081282506],
              [-122.48700141906738, 37.83080223556934],
              [-122.48751640319824, 37.83168351665737],
              [-122.48803138732912, 37.832158048267786],
              [-122.48888969421387, 37.83297152392784],
              [-122.48987674713133, 37.83263257682617],
              [-122.49043464660643, 37.832937629287755],
              [-122.49125003814696, 37.832429207817725],
              [-122.49163627624512, 37.832564787218985],
              [-122.49223709106445, 37.83337825839438],
              [-122.49378204345702, 37.83368330777276]
            ]
          }
        }
      },
      "layout": {
        "line-join": "round",
        "line-cap": "round"
      },
      "paint": {
        "line-color": "#888",
        "line-width": 8
      }
    });
  });
}

​

我在这里请求了JSON：

​

function loadData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function(response) {
    if (this.readyState == 4 && this.status == 200) {
      offpistes = JSON.parse(xhttp.responseText);
      render()
      getCoords()
    }
  }
  xhttp.open("GET", "offpistes.json", true);
  xhttp.send();
}

​

如果我有这样的代码，可以将一些信息输出到屏幕上，我可以编写一个类似的函数来将坐标添加到map.addLayer中吗？

​

function render() {
  var output = '';
  for (var i = 0; i < offpistes.length; i++) {
    if (offpistes[i].the_geom !== null) {
      output += '<li class="names">' + offpistes[i].name + '</li>';
      output += '<li class="dif" type="none">' + 'Difficulty: ' + offpistes[i].ski_difficulty + '</li>';
      output += '<li class="desc" type="none">' + offpistes[i].short_description + '</li>';
    }
  }
  document.getElementById('list').innerHTML = output;
}

​

Answer 1

我是这样解决的。

​

function getCoords () {
  // wait for both map and data before drawing lines
  if (!(map && map.loaded() && offpistes)) {
    return;
  }

  for (var i = 0; i < offpistes.length; i++) {
    if (offpistes[i].the_geom !== null) {
      var coordinates = [];
      for (var j = 0; j < offpistes[i].the_geom.coordinates.length; j++) {
        for (var k = 0; k < offpistes[i].the_geom.coordinates[j].length; k++) {
          coordinates.push([offpistes[i].the_geom.coordinates[j][k][0], offpistes[i].the_geom.coordinates[j][k][1]]);
        }
      }
      map.addLayer({
        "id": "offpistes_" + i,
        "type": "line",
        "source": {
          "type": "geojson",
          "data": {
            "type": "Feature",
            "properties": {},
            "geometry": {
              "type": "LineString",
              "coordinates": coordinates,
            }
          }
        },
        "layout": {
          "line-join": "round",
          "line-cap": "round"
        },
        "paint": {
          "line-color": "#678",
          "line-width": 4
        }
      });
    }
  }
}

​