HTML5交互式楼层平面图

Question

我需要开发互动式楼房平面图导航器和查看器，用于替代基于 Flash 的前身。

我正在评估最适合在 HTML5 中实现此功能的技术和技术。而且我需要支持所有常见的浏览器（包括从IE7开始）。

要求：

• 用户将看到建筑物的几个静态室外视图，可以使用简单的小部件在它们之间切换。
• 他们将能够在这个外部视图上选择一个楼层。在鼠标悬停时（对于触摸设备则是点击），该楼层会被突出显示。
• 当单击楼层时，您将切换到楼层平面图，在鼠标悬停/单击上提供有关公寓的详细信息。
• 应涉及一些动画效果，但不要过于花哨。

我正在考虑实现此功能的选项。 我还需要一种快速选择多边形的方法，以允许非开发人员创建新建筑物中的楼层（概述）和公寓（楼层平面图）。

我想到以下选项：

1. 使用纯图片和图像映射用于图层覆盖。
2. 使用Canvas（利用Google的JavaScript解决方案为不支持的浏览器）。在canvas标记中加载图像并动态创建图层覆盖。
3. 使用SVG

哪个选项最适合跨浏览器兼容性？

- theduke

---

如果您能够总结一下您的问题，使其更易于阅读，那将非常棒 - 您在那里有相当多的文本。此外，您应该接受一些其他问题的答案。 - starbeamrainbowlabs

Answer 1

无论是SVG还是Canvas都能满足你的需求。因为SVG已经做的很好，所以在SVG中开发会更容易。

以下是一些其他考虑因素：

- Canvas适用于所有“现代”浏览器，但不支持IE7/8 - SVG适用于所有现代浏览器，并且VML（非常相似）可用于IE7/8 - 目前Canvas中的文本呈现在不同浏览器中可能看起来截然不同 - Canvas在Android和iOS中有一定程度的运作（像文本渐变等小问题仍会出错） - SVG在安卓手机上无法使用（至少一年前是这样的。是否有任何改变？），但在iOS中可以使用 - SVG的可访问性要好得多。文本可搜索，因此符合SEO、盲人友好、复制粘贴友好等要求，与DOM的交互更自然。 - Canvas的性能更好，但你并不需要那么高性能。 就兼容性而言，它们现在基本相等，除了旧版本的IE。使用excanvas库可以让Canvas在这些浏览器中工作，但它效果不佳，特别是如果有任何动画效果。

我建议选择SVG，因为对于楼层平面图应用程序来说，你将能够更快速地开始开发。每个元素都已经是DOM对象了，事件、鼠标处理等都已经为你完成。

但如果你真的希望它能在（旧的？）安卓手机上运行，那么Canvas现在可能更好些。

- Simon Sarris

---

画布性能更好，但你不需要那个。 - JL9

Answer 2

我计划针对室内导航做类似的东西 :)

我最终使用了 OpenLayers (http://openlayers.org/)

实际上，OpenLayers 最初是为地理信息系统（地图等）而发明的，但你可以轻松定义一个 X-Y-Z 度量坐标系并简单地将其用矢量数据填充。

最大的好处是它具有许多功能，如绘制、不同的矢量叠加、碰撞检测、距离测量、工具提示、标记等：

对于 OpenLayers 2.x（最初版本），请参见:

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/draw-feature.html

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/transform-feature.html

对于 OpenLayers 3.x，请参见:

http://openlayers.org/en/v3.4.0/examples/

http://openlayers.org/en/v3.4.0/examples/draw-features.html

您可以通过 GeoJSON、GML 等与后端进行通信。我们使用 PostGIS 作为后端存储矢量数据。Mysql 也有一个空间扩展（http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html）。

只需定义一个简单的X-Y-Z坐标系，并选择一个良好的参考点即可 :)

- sled

---

@Sled，你能给我指出一个可行的示例吗？我想让用户在楼层平面图JPEG上定义他们的参会者的座位分配。带有上下文弹出窗口和其中内容的东西。 - Siva Tumma