这是我第一次使用 map 编写 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我成功地显示了 map ，但现在我还希望能够显示我的算法找到的一些路径。
这是来自 openstreetmap 的示例，我想如何显示路径:
我注意到他们正在使用<path>有职位。
我读过here关于<path>标签。
我知道我需要使用位置内容创建此标签，以便在 map 上显示路径。
我的问题是我只有每个节点的坐标，我不知道如何将其转换为位置。
例如，如果我有一条长度为 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>
我的用于显示 map 的 javascript 代码 (map.js):
var g_Map;
$(function() { //on load
g_Map = L.map('map').setView([32.0641463, 34.7811246], 13);
var tilesAttrib = '© <a href="www.openstreetmap.org/copyright">OpenStreetMap</a> contributors <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);
});
最佳答案
您应该使用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 .
关于javascript - 如何将带有节点坐标的路径转换为带有点的 <path> 标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32155876/