javascript - 使用 html5 和 javascript 在浏览器中显示交互式 2D 平面图

Question

我需要替换多年前构建的 Flash 查看器，以显示来自 AutoCAD 的交互式2D 平面图。

目前，AutoCAD 文件被读取并转换为 XML 文件，其中包含表示平面图对象的多边形的 X 和 Y 坐标:房间、墙壁、 Assets 等。绘图中的对象是可点击的，并且可以根据专题 View 设置为可见或不可见。

有时这些平面图可能相对较大，有很多点。

我已经尝试使用像 LeafletJS 这样的网络 map 控件，因为它已经具有 PAN 和 ZOOM 功能，我可以插入可点击的标记，并管理图层，这样我就可以通过主题 View 。我已将 map CRS 设置为指标，并将数据加载为 GeoJSON。不幸的是，对于现实世界的中型平面图，它太慢并且有时变得无响应。

下面的示例由 18630 个线对象组成，在平移时 react 不是很好。

所以现在我想使用SVG 或CANVAS 在浏览器中直接绘制平面图。我更喜欢使用 CANVAS，因为它比 SVG 快得多，如果支持，也可以使用 WebGL，但我必须依赖库才能拥有事件处理程序以及像 DOM 一样简单的对象管理。

所以现在我想知道像 threeJS 这样的库是否可以轻松处理这样的任务，即使我需要映射 2D 对象，它是否是可供选择的正确技术。特别是，threeJS 是否可行:

1. 将事件监听器分配给对象以获取它们的 ID？
2. 要将 CSS3 规则应用于样式对象，例如突出显示房间或 table ？
3. ThreeJS 可以轻松绘制到 SVG 或 Canvas 元素？
4. 使用 ThreeJS 我也可以轻松地管理平移和缩放？
5. 它也可以在移动设备上显示吗？ (Android 和 iOS)

如果有人知道更好的库或技术来完成这项任务，我完全可以接受任何建议。

(请注意，我只需要 2D 图纸，因为 3D 已经使用 Revit 的其他技术构建)

Answer 1

使用 webgl(例如通过 three.js)，您可以在支持 GPU 的桌面浏览器上以 60fps 的速度绘制数百万个简单的线基元。

这是一个人为设计的超过一百万行原语的示例，使用 three.js 将它们组合在一起:

https://codesandbox.io/s/0pp3x92n4p

这里:

http://vectorslave.com/wireblueprint/index.html