SVG/Vector map室内导航路线

Question

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

感谢您的任何建议

谢谢

Answer 1

是!您可以使用JavaScript来实现这一点，还可以添加事件侦听器并执行其他类似于普通HTML页面的DOM操作。(请参阅此答案的底部，了解如何在给定两个点的SVG上绘制直线。)

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

​

​

这有点繁琐，但我们所做的就是在SVG中添加了circle元素。每个门外都有元素，走廊交叉口也有元素。

一个典型的元素如下。

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

请注意，radius属性足够小，以至于在SVG上看不到它(除非用户决定放大很多)。我们还在data-neighbors属性中手动输入了相邻点的ids。这是因为我们的后端解析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);

Answer 2

您可以使用JS和CSS操作SVG，这样可以添加更多与SVG的交互。SVG是XML，可以像普通的DOM树一样用JS遍历，因此您可以创建函数来处理您的需求。您甚至可以将您创建的SVG作为图层放在Google Maps中。

本文使用了FloorMaps的简单示例。Interface with SVG