我一直在网上寻找关于如何实现SVG室内平面图自定义点对点导航系统的教程或方法。我搜索了网络,但唯一的选择是与谷歌地图配合使用。但是我使用Illustrator创建了我的地图,其作为SVG图像使用路径/矢量创建。我不需要为用户实施任何导航指令,只需要简单的从一个点到另一个点的路线。必须有一种方法可以使用矢量来在地图上标记导航路径等位置。
希望能得到任何建议。
谢谢
希望能得到任何建议。
谢谢
是的!您可以使用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);
你可以使用JS和CSS来操作SVG,从而为SVG添加更多的交互。SVG是XML格式的,可以像普通DOM树一样被JS遍历,因此你可以创建函数来处理你的需求。你甚至可以将你创建的SVG作为图层放置在Google地图中。
本文使用简单的楼层地图示例。与SVG接口
你可以绘制一个SVG,并使用JavaScript使其交互
https://echarts.apache.org/examples/en/editor.html?c=geo-svg-lines