如何將路徑與節點座標轉換爲<path>帶點標記

這是我第一次用地圖編寫web應用程序。
我正在使用Java servlets，Netbeans IDE，javascript，html和css。
我創建了一個算法，該算法創建來自openstreetmap的給定圖（* osm文件）的路徑。
* osm文件是在openstreetmap中表示圖形的XML文件，更多信息here。如何將路徑與節點座標轉換爲<path>帶點標記

路徑結構具有節點列表，其中的第一個節點是源的最後一個節點是目標：

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

});

來源

2015-08-22 E235

你應該用單張的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。

來源

2015-08-22 13:30:03 jonahb

如何將路徑與節點座標轉換爲<path>帶點標記

回答

相關問題