SVG/矢量地图室内导航路线规划

Question

我一直在网上寻找关于如何实现SVG室内平面图自定义点对点导航系统的教程或方法。我搜索了网络，但唯一的选择是与谷歌地图配合使用。但是我使用Illustrator创建了我的地图，其作为SVG图像使用路径/矢量创建。我不需要为用户实施任何导航指令，只需要简单的从一个点到另一个点的路线。必须有一种方法可以使用矢量来在地图上标记导航路径等位置。

希望能得到任何建议。

谢谢

- Bobby

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" />

请注意，半径属性足够小，以至于在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);

- Ryan Pelletier

Answer 2

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

本文使用简单的楼层地图示例。与SVG接口

- Phil

Answer 3

你可以绘制一个SVG，并使用JavaScript使其交互

https://echarts.apache.org/examples/en/editor.html?c=geo-svg-lines

- Doberon