HTML5中的交互式平面图

Question

我必须为公寓楼开发交互式平面图导航器和观察器，这将成为其基于Flash的前身。

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

要求：

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

您可以在此处查看基于Flash的版本的版本：http://salitergasse.at/sg9/eigentumswohnungen/moedling/perchtoldsdorf

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

我提出的选项：

1. 使用普通图像和图像地图进行中途停留。
2. 使用canvas（在没有支持的情况下使用Google的Javascript解决方案）。将图像加载到canvas标记中并动态创建中继。
3. 使用SVG

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

Answer 1

SVG或Canvas都能满足您的需求。你可能会更容易在SVG中开发它，因为已经为你完成了多少工作。

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

• Canvas适用于所有“现代”浏览器，但不适用于IE7 / 8
• SVG适用于所有现代浏览器，VML（非常接近）适用于IE7 / 8
• Canvas中的文本呈现现在看起来与每个浏览器完全不同
• Canvas在Android和iOS中工作到一定程度（像文本渐变这样的小问题仍然搞乱）
• SVG在android中不起作用（至少它不是一年前的。有什么变化吗？）它在iOS中有效吗
• SVG的可访问性 FAR 更好。文本是可搜索的，因此SEO友好，盲目友好，复制和粘贴友好等。与其他DOM交互更自然。
• Canvas性能更好，但您不需要。

此时它们的兼容性非常相似，除了IE的旧版本。你可以使用excanvas库来使用Canvas，但它有点糟糕，特别是如果有什么东西要移动的话。

我之所以推荐SVG，是因为您可以更快地开发出适用于平面图类型的应用程序的SVG。一切都已经是一个DOM对象了。事件，鼠标处理等已经为您完成。

但是，如果你真的想要它（更老的吗？）Android手机，Canvas可能是现在更好的选择。

Answer 2

我正在计划类似的室内导航：）

我最终使用的是OpenLayers（http://openlayers.org/）

实际上OpenLayers是为GIS Stuff（地图等）发明的，但您可以轻松定义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坐标系：）