Question

这是我第一次使用地图编写Web应用程序我正在使用Java servlets，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>位置我阅读了关于<path>标记的here 我知道我需要创建带有位置内容的标签，以便在地图上显示路径我的问题是我只有每个节点的坐标，我不知道如何将它转换为位置例如，如果我有一个长度为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);

});

Answer 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。

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

1 个答案: