Question

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

任何建议表示赞赏

由于

Answer 1

是的！您可以使用JavaScript执行此操作，以及添加事件侦听器并执行与普通HTML页面类似的其他DOM操作。（请参阅本答案的底部，了解如何在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" />

请注意，radius属性足够小，无法在SVG上看到它（除非用户决定放大很多）。我们还手动输入了相邻点的ID的 data-neighbors 属性。这是因为我们的后端解析SVG文件，使用这些点构建图形，并使用Dijkstra算法生成路径。我们使用cx和cy属性来计算图上节点之间的距离。

以下是关于点的样子（当半径足以看到它们时）的特写

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

这是一个例子。在哪里＆＃34; svg＆＃34;是对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，可以使用JS作为普通的DOM树遍历，因此您可以创建函数来处理您的需求。您甚至可以将您创建的SVG作为图层放置在Google地图中。

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

SVG /矢量地图室内导航路由

2 个答案: