SVG /矢量地图室内导航路由
我一直在网上搜索关于如何为基于SVG的室内平面图制定我自己的点对点导航系统的教程或方法。 我搜索过网络，但唯一的选项适用于谷歌地图。 但是我使用Illustrator作为SVG图像使用路径/向量创建了我的地图。 我不需要为用户实现任何导航指令，只需从一个点到另一个点的简单路由。 必须有一种方法可以使用矢量在地图上绘制导航路径可以转弯的点等。
任何建议表示赞赏
谢谢
是! 您可以使用JavaScript执行此操作，以及添加事件侦听器并执行与普通HTML页面类似的其他DOM操作。 （请参阅本答案的底部，了解如何在SVG上绘制一条线，给出两点。）
我正在研究一个完全正确的项目。 用户能够输入他们的起始房间号和目的地房间号，并且该路线被绘制在SVG上。
这有点单调乏味，但我们所做的是在SVG上放置圆形元素。 每个门口外都有元素，也有走廊交叉点。
典型的元素如下。
请注意，radius属性足够小，无法在SVG上看到（除非用户决定放大）。 我们还手动输入了data-neighbors属性相邻点的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);
您可以使用JS和CSS操作SVG，这样就可以添加更多与SVG的交互。 SVG是XML，可以使用JS作为普通的DOM树遍历，因此您可以创建函数来处理您的需求。 您甚至可以将您创建的SVG作为图层放置在Google地图中。
本文使用了FloorMaps的简单示例。 与SVG的接口