Question

我写了这个函数来到LONG和LAT。原因是＆＃34; the_geom＆＃34; JSON中的字段也有高程，我不需要。 console.log仅用于验证目的。我会用return替换它或将输出保存在变量中。

＆＃13;

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]);
        }
      }
    }
  }
}

＆＃13;

我在mapbox文档中找到了这段代码，但我无法弄清楚如何为每个字符串添加坐标。此外，迭代for循环需要很长时间。什么是更好的方法呢？

＆＃13;

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
      }
    });
  });
}

＆＃13;

我在这里请求了JSON：

＆＃13;

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();
}

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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
        }
      });
    }
  }
}

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

1 个答案: