HTML5中的交互式平面布置图
我必须开发公寓建筑的交互式平面图导航器和查看器，这将接替其基于Flash的前身。
我现在正在评估最适合在HTML5中实现这一点的技术和技术。我将不得不支持所有常见的浏览器(IE从7开始)。
要求：
- 向用户展示了建筑物的几个静态室外视图，用户可以使用一个简单的小部件在这些视图之间进行切换。
- 他们将能够在这个外部视图上选择一个楼层。在鼠标悬停(单击以获取触摸设备)时，楼层将被highlighted.
- Upon单击您切换到平面图的楼层，该平面图-再次单击鼠标悬停/onclick-提供有关应涉及的apartment.
- Some动画的详细信息，但不要太花哨。
我一直在思考实现这一点的选择。我还需要一个快速的方式选择多边形的楼层(概述)和公寓(楼层平面图)，以允许非开发商创建新的建筑。
我想到的选项是：
Google在layovers.
- Use画布上使用普通图像和图像映射(在没有支持的浏览器上使用
- 解决方案)。在canvas标记中加载图像并动态创建layovers.
- Use SVG
跨浏览器兼容性的最佳选择是什么？
回答 2
Stack Overflow用户
发布于 2011-07-27 00:16:19
SVG或Canvas都可以满足您的需求。您可能会更容易在SVG中开发它，因为已经为您完成了很多工作。
以下是其他一些注意事项：
- Canvas可以在所有“现代”浏览器中工作，但不是IE7/8
- SVG可以在所有现代浏览器中工作，而VML (非常接近)是在IE7/8
- 中，现在每个浏览器中的文本渲染看起来可能会有很大的不同
- Canvas在一定程度上可以在安卓和iOS中工作(文本梯度等小事情仍然混乱)
<代码>H19SVG在安卓中不能工作(至少一年前它不能)。有什么变化吗？)它确实可以在iOS
- 中工作，SVG的可访问性是FAR better。文本是可搜索的，因此对SEO友好，对盲人友好，对复制和粘贴友好，等等。与DOM的其余部分交互更多natural.
- Canvas性能更好，但您不需要这样。
在这一点上，除了旧版本的IE之外，它们在兼容性方面几乎是一样的。您可以使用excanvas库让它们与Canvas一起工作，但它有点糟糕，特别是如果有任何东西要移动的话。
我推荐SVG的唯一原因是，对于平面图类型的应用程序，您可以更快地开始开发它。一切都已经是一个DOM对象了。事件，鼠标处理等，已经为你做好了。
但是如果你真的想让它在上面工作(旧的？)android手机，Canvas可能是目前更好的选择。
Stack Overflow用户
发布于 2011-07-27 00:23:56
我正在为室内导航计划类似的东西:)
我最终使用了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坐标系:)
https://stackoverflow.com/questions/6832964
复制相似问题