如何将带有节点坐标的路径转换为带有点的 <path> 标签答案

【问题标题】：How to convert path with coordinates of nodes to <path> tag with points如何将带有节点坐标的路径转换为带有点的 <path> 标签
【发布时间】：2015-08-22 21:30:03
【问题描述】：

这是我第一次使用地图编写 Web 应用程序。
我正在使用 Java servlet、Netbeans IDE、javascript、html 和 css。
我创建了从openstreetmap 的给定图表（*osm 文件）创建路径的算法。
*osm 文件是在 openstreetmap 中表示图形的 XML 文件，更多信息 here。

路径结构有节点列表，其中第一个节点是源，最后一个节点是目标：

public class Way 
{
    private double m_Length;
    private long m_Id;
    //private List<Long> m_NodesRefs;   // this is for  <nd ref=123123> 
    private List<Node> m_Nodes; 
...
}

每个节点都有纬度和经度：

public class Node implements Comparable<Node>
{

  private long m_Id;
  private List<Edge> m_Adjacencies = new ArrayList<Edge>();
  private double m_Longtitude;
  private double m_Latitude;
  private Node m_Prev; 
  private double m_MinDistance = Double.POSITIVE_INFINITY;
  ...
 }

使用Leaflet 我成功地显示了地图，但现在我还希望能够显示我的算法找到的一些路径。

这是来自 openstreetmap 的示例，我想如何显示路径：

我注意到他们将<path> 与职位一起使用。
我读了here 关于<path> 标签。
我知道我需要使用位置内容创建此标签，以便在地图上显示路径。
我的问题是我只有每个节点的坐标，我不知道如何将其转换为位置。
例如，如果我有一条长度为 3 的路径：

<node id="2500639640" lat="32.1555549" lon="34.8946619"/>/>
<node id="2500639651" lat="32.1556683" lon="34.8946958"/>
<node id="2500639647" lat="32.1557488" lon="34.8947266"/>

如何从这个带有位置的<path> 标签创建？

我的 HTML 代码（map.html）：

<!DOCTYPE html>
<html >
  <head>
   <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
   <script type="text/javascript" src="js/map/leaflet.js"></script>
   <script type="text/javascript" src="js/map/map.js" ></script>

    <meta charset="UTF-8">
    <title>MyApp</title> 
        <link rel="stylesheet" href="css/leaflet.css" />
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/map.css" />  
  </head>
  <body>
    <div class="wrapper">
     <div class="container">
            <img src="Images/AppLogo.png" class="logo">
            <div id="dataviewer">
                <div id="map">

                </div>   
           </div>
     </div>
    </div>
  </body>
</html>

我的 javascript 代码显示地图 (map.js)：

var g_Map;
$(function() { //on load

    g_Map = L.map('map').setView([32.0641463, 34.7811246], 13);

    var tilesAttrib = '&copy; <a href="www.openstreetmap.org/copyright">OpenStreetMap</a> contributors&ensp;<small>Data:ODbL, Map:cc-by-sa</small>';
    // var tilesUrl = 'https://{s}.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png'; 
    var tilesUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
    var tiles = new L.TileLayer(tilesUrl, {attribution: tilesAttrib});
    g_Map.addLayer(tiles);
    scaleControl = new L.Control.Scale({metric: true, imperial: false, });
    scaleControl.addTo(g_Map);

});

【问题讨论】：

标签： javascript html position leaflet openstreetmap

【解决方案1】：

您应该使用 Leaflet 的 Polyline，而不是 SVG 路径。您需要将节点公开为 JavaScript 数组（例如 nodes）。那么：

var latlngs = [];
var i = 0;

for (i = 0; i < nodes.length; ++i) {
  latlngs.push(L.latLng(nodes[i].lat, nodes[i].lon));
}

var polyline = L.polyline(latlngs);
g_Map.addLayer(polyline);

Polyline 采用地理坐标，因此无需转换。如果您确实需要进行此转换，请参阅 Map.latLngToLayerPoint 和 IProjection。

【讨论】：