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

【问题标题】：SVG/Vector map indoor navigational routingSVG/矢量地图室内导航路由
【发布时间】：2015-05-21 17:17:32
【问题描述】：

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

任何建议表示赞赏

谢谢

【问题讨论】：

标签： javascript php jquery vector svg

【解决方案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 引用它，并在决定绘制新线时删除整个路线。

这是一个例子。其中“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);

【讨论】：

【解决方案2】：

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

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

【讨论】：