SVG /矢量地图室内导航路由 [英] SVG/Vector map indoor navigational routing

问题描述

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

I've been searching the web for tutorials or methods on how to to implement my own point to point navigation system for an SVG-based indoor floor plan map. I have searched the web but the only options work with google maps. However I created my map using Illustrator as an SVG image using paths/vectors. I don't need to implement any navigational instructions for the user, just a simple route from one point to another. There must be a way to use the vectors to plot points on the map that the navigational path can take for turns etc.

任何建议赞赏

谢谢

推荐答案

是的！您可以使用JavaScript执行此操作，以及添加事件侦听器并执行与普通HTML页面类似的其他DOM操作。 （请参阅本答案的底部，了解如何在SVG上绘制一条线，给出两点。）

Yes! You can do this with JavaScript, as well as add event listeners and do other DOM manipulation similar to with a normal HTML page. (See the bottom of this answer for how to draw a line on the SVG given two points.)

我正在开发一个完全符合这个要求的项目。用户可以输入他们的起始房间号码和目的地房间号码，并且路线被绘制在SVG上。

I am working on a project that does exactly this. The user is able to enter their starting room number and destination room number, and the route is plotted on the SVG.

这有点单调乏味，但我们做的是在SVG上放置圆形元素。每个门口外面都有元素，也有走廊交叉点。

It was a bit tedious, but what we did was put circle elements on the SVG. There were elements outside of each doorway, and also at hallway intersections.

典型元素如下。

    <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属性来计算图表上节点之间的距离。

Note that the radius attribute is small enough to where it won't be seen on the SVG (unless the user decides to zoom in alot). We also manually entered into the data-neighbors attribute the ids of adjacent points. This is because our back end parses the SVG file, builds a graph using these points, and uses Dijkstra's algorithm to generate the route. We used the cx and cy attributes to calculate the distance between nodes on the graph.

这是一个关闭点的样子（当半径足够大时）看他们）

Here is a close up of what the points look like (when the radius is big enough to see them)

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

Now, when a route is generated we are simply drawing lines on the SVG between each of the points. We put each of the lines in a group so that we can reference it by id later and remove the entire route when we decide to draw a new one.

这是一个例。其中svg是对SVG元素的引用，这里是我们如何在两个点（x1，y1，x2，y2）之间绘制一条线，你可以很容易地遍历一个点列表并以类似的方式绘制所有的线条。

Here is an example. Where "svg" is a reference to the SVG element, here is how we draw a line between two points (x1,y1,x2,y2), you could easily iterate through a list of points and draw all the lines in a similar fashion.

    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);

这篇关于SVG /矢量地图室内导航路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！