HTML5 中的交互式平面图 [关闭]

Question

我必须为公寓楼开发交互式平面图导航器和查看器，它将继承其基于 Flash 的前身。

我现在正在评估最适合在 HTML5 中实现这一点的技术和技术。 我将不得不支持所有常见的浏览器（IE从7开始）。

要求：

• 向用户展示了建筑物的几个静态室外视图，他可以通过一个简单的小部件在这些视图之间切换。
• 他们将能够在这个外部视图上选择一个楼层。鼠标悬停（点击触摸设备）时，地板将突出显示。
• 单击楼层后，您会切换到平面图，该平面图 - 再次在鼠标悬停/单击时 - 提供有关公寓的详细信息。
• 应该涉及一些动画，但不要太花哨。

我一直在考虑实现这一点的选项。 我还需要一种为楼层（概述）和公寓（平面图）选择多边形的快速方法，以允许非开发商创建新建筑物。

我想出的选项：

1. 在中途停留时使用普通图像和图像地图。
2. 使用画布（在不支持的浏览器上使用 Google 的 Javascript 解决方案）。在画布标签中加载图像并动态创建停留。
3. 使用 SVG

跨浏览器兼容性的最佳选择是什么？

Answer 1

SVG 或 Canvas 都可以满足您的需求。仅仅因为已经为您完成了很多工作，您可能会更轻松地在 SVG 中开发它。

以下是其他一些注意事项：

• Canvas 适用于所有“现代”浏览器，但不适用于 IE7/8
• SVG 适用于所有现代浏览器，VML（非常接近）在 IE7/8 中
• Canvas 中的文本渲染现在可能会因浏览器而异
• Canvas 在一定程度上可以在 Android 和 iOS 中使用（文本渐变等小问题仍然会造成混乱）
• SVG 不能在 android 中工作（至少一年前不能。有什么变化吗？）它在 iOS 中可以工作
• SVG 的可访问性远更好。文本是可搜索的，因此对 SEO 友好、盲人友好、复制粘贴友好等。与 DOM 的其余部分交互更加自然。
• 画布性能更好，但您不需要。

在这一点上，它们在兼容性方面是相当的，除了旧版本的 IE。您可以使用 excanvas 库让它们与 Canvas 一起使用，但这有点糟糕，尤其是在任何东西要移动的情况下。

我推荐 SVG 仅仅是因为您可以更快地为平面布局类型的应用程序开发它。一切都已经是一个 DOM 对象。事件、鼠标处理等已经为您完成。

但如果你真的想让它在（旧的？）安卓手机上工作，Canvas 可能是目前更好的选择。

Answer 2

我正在为室内导航计划类似的东西:)

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

实际上，OpenLayers 是为 GIS 材料（地图等）而发明的，但您可以轻松定义 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 坐标系和一个精心选择的参考点 :)