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

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上看到(除非用户决定放大).我们还手动输入了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);

Answer 2

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

本文使用了 FloorMap 的简单示例。与 SVG 的接口