在 OSM 地图中无法看到折线

Question

我正在努力绘制使用 OSM 和使用节点作为后端的传单的方法。在前端我有 leaflet2.html，它在脚本标签中有以下内容：

  const mymap = L.map("map");

  async function getGeoJSONArr() {
    const response = await fetch("http://localhost:3000/data");
    const jsonArr = await response.json();
    console.log("jsonARR", jsonArr);
    const reversedCoords = jsonArr[0].slice().reverse();
    console.log(reversedCoords);
    return { jsonArr: jsonArr, reversedCoords: reversedCoords };
  }

  (async function buildMap(params) {
    const o = await getGeoJSONArr();
    console.log(o);
    const polyline1 = o.jsonArr;
    const reversedCoords = o.reversedCoords;
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
      maxZoom: 18,
    }).addTo(mymap);

    mymap.setView(reversedCoords, 13);

    // Add a polyline

    L.polyline(polyline1, { color: "blue" }).addTo(mymap);

   })();

在控制台中我看到：

{jsonArr: Array(5), 
reversedCoords: Array(2)}jsonArr: Array(5)0: (2) [-110.9582708, 31.9323673]

1: (2) [-110.9579731, 31.9323537]2: (2) [-110.9576486, 31.9323673]3: (2) [-110.955342, 31.931959]4: (2) [-110.952628, 31.931936]length: 5[[Prototype]]: Array(0)
reversedCoords: (2) [31.9323673, -110.9582708][[Prototype]]: Object

没有错误。

我期待在地图上看到一条折线，但我没有看到。我做错了什么？

Answer 1

我想我知道你做错了什么，因为一周前我一直在犯同样的错误-

当您使用返回 geoJSON 数据的服务（例如 OSRM 或 Nominatim）时，尝试反转纬度、经度和绘制 L.polylines

manually

是 wrong

相反，您应该将 geoJSON 数据添加到

L.geoJSON 层（而不是直接添加到 mymap

，如您问题中的代码片段所示），该层将为您执行正确的绘图。

这里是我的一个小演示来演示这种方法，请注意我是如何在那里调用

routesGroup.addData(route.geometry);

并自动绘制蓝色路线

：

'use strict';

function processOsrmReply(data) {

  myMap.flyToBounds(markersGroup.getBounds());

  if (data.code !== 'Ok') {
    clearMap('Error code: ' + data.code);
    return;
  }

  data.routes.forEach(function(route) {
    routesGroup.addData(route.geometry);
  });
}

function sendOsrmRequest() {
  var url = 'https://router.project-osrm.org/route/v1/car/' +
    parseFloat(startMarker.getLatLng().lng).toFixed(6) + ',' +
    parseFloat(startMarker.getLatLng().lat).toFixed(6) + ';' +
    parseFloat(finalMarker.getLatLng().lng).toFixed(6) + ',' +
    parseFloat(finalMarker.getLatLng().lat).toFixed(6) +
    '?overview=simplified' +
    '&alternatives=2' +
    '&steps=false' +
    '&annotations=false' +
    '&geometries=geojson';

  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      var data = JSON.parse(this.response);
      processOsrmReply(data);
    } else {
      clearMap('Error status: ' + this.status);
    }
  };
  request.send();
}

function clearMap(str = '') {
  var myStatus = document.getElementById('myStatus');
  myStatus.textContent = str;
  linesGroup.clearLayers();
}

var startPosition = [31.9322, -110.9583];
var finalPosition = [31.9319, -110.9526];

var myMap = L.map('myMap').setView(startPosition, 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap);

var markersGroup = L.featureGroup();
myMap.addLayer(markersGroup);
var routesGroup = L.geoJSON();
myMap.addLayer(routesGroup);

var overlays = {
  'Show start and finish markers': markersGroup,
  'Show OSRM route geometry': routesGroup
};

L.control.layers(null, overlays, {
  collapsed: false
}).addTo(myMap);

var startMarker = L.marker(startPosition, {
    draggable: true,
    title: 'start'
  })
  .on('dragend', sendOsrmRequest)
  .addTo(markersGroup);

var finalMarker = L.marker(finalPosition, {
    draggable: true,
    title: 'finish'
  })
  .on('dragend', sendOsrmRequest)
  .addTo(markersGroup);

sendOsrmRequest();

html,
body {
  margin: 0;
  padding: 0;
}

#myMap {
  position: absolute;
  top: 2em;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

#myStatus {
  position: absolute;
  z-index: 2;
  width: 100%;
  text-align: center;
}

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>

<div id="myStatus">Drag the 2 markers to calculate the OSRM route</div>
<div id="myMap"></div>