SVG/矢量图室内导航路由

我一直在网上搜索有关如何为基于 SVG 的室内平面图实现我自己的点对点导航系统的教程或方法。我已经在网上搜索过，但唯一的选项适用于谷歌地图。不过，我使用 Illustrator 创建了地图，并使用路径/矢量作为 SVG 图像。我不需要为用户实现任何导航指令，只需从一个点到另一个点的简单路线。必须有一种方法可以使用矢量在地图上绘制导航路径可以转弯的点等。

任何建议表示赞赏

Thanks

是的！您可以使用 JavaScript 来完成此操作，还可以添加事件侦听器并执行其他 DOM 操作，与普通 HTML 页面类似。 （请参阅本答案的底部，了解如何在给定两个点的 SVG 上画一条线。）

我正在做一个项目，正是这样做的。用户可以输入他们的起始房间号和目的地房间号，路线就会绘制在 SVG 上。

这有点乏味，但我们所做的是将圆形元素放在 SVG 上。每个门口外以及走廊交叉口处都有元素。

典型的元素如下。

    <circle
        id="route3287-1"
        style="fill:#000000;stroke:none"
        cx="2014.0000"
        cy="239.6"
        r=".05"
        data-neighbors="route3296-1,06-07" />

请注意，半径属性足够小，以至于在 SVG 上看不到它（除非用户决定放大很多）。我们也手动输入数据邻居属性相邻点的 id。这是因为我们的后端解析 SVG 文件，使用这些点构建图表，并使用 Dijkstra 算法生成路线。我们使用 cx 和 cy 属性来计算图上节点之间的距离。

这是这些点的特写（当半径足够大可以看到它们时）

现在，当生成路线时，我们只需在 SVG 上每个点之间绘制线条即可。我们将每条线放在一个组中，以便稍后可以通过 id 引用它，并在决定绘制新路线时删除整个路线。

这是一个例子。其中“svg”是对 SVG 元素的引用，这是我们如何在两点 (x1,y1,x2,y2) 之间绘制一条线，您可以轻松地迭代点列表并以类似的方式绘制所有线。

    var newElement = svg.createElementNS('http://www.w3.org/2000/svg', 'path');
     newElement.setAttribute('d', 'M' + x1 + ',' + y1 + 'L' + x2 + ',' + y2);
     newElement.style.stroke = '#000000';
     newElement.style.strokeWidth = '15px'; 
     svg.appendChild(newElement);