HTML5中的交互式平面图

Question

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

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

要求:

• 向用户呈现建筑物的几个静态室外视图,在他们之间可以用简单的小部件切换.
• 他们将能够在这个外部景观中选择一个楼层.在鼠标悬停时(单击触摸设备),地板将突出显示.
• 点击地板后,您可以切换到平面图,再次在鼠标悬停/ 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交互是更自然的.
• 画布性能更好,但您不需要.

在这一点上,它们在兼容性方面非常相似,除了IE的旧版本.你可以使用excanvas库来使用Canvas,但它有点糟糕,特别是如果有什么东西要移动的话.

我推荐SVG只是因为你能够更快地为平面图类型的应用程序开发它.一切都已经是一个DOM对象了.事件,鼠标处理等已经为您完成.

但是,如果你真的想要它(旧的？)Android手机,Canvas可能是现在更好的选择.

Answer 2

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

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

实际上OpenLayers是为GIS Stuff(地图等)发明的,但您可以轻松定义XYZ度量坐标系,并简单地用矢量数据提供它.

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

对于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).

只需使用精心选择的参考点定义一个简单的XYZ坐标系:)