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

Question

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

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

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

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

下面的示例由 18630 个线对象组成，在平移时反应不是很明显。

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

所以现在我要问的是，像 threeJS 这样的库是否可以处理这样的简单任务，即使我需要映射 2D 对象，并且选择它是否是正确的技术。特别是，是否可以使用threeJS：

1. 要将事件侦听器分配给对象以获取其 ID？
2. 要将 CSS3 规则应用于对象样式，例如突出显示房间或桌子？
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

Answer 2

按照feeela 的建议，我在SVG 中实现了可视化， 绘制由 18630 条线组成的相同模型。

它的加载速度肯定比 GeoJSON Leaflet 度量地图快。

SVG 由查询建筑物和楼层的 API 提供，它以元素（文本/纯文本）的形式返回架构，我将这些元素附加到网页中的元素。

要将字符串路径元素附加到我使用的 SVG DOM 元素 parseSVG library。

我还没有找到对 pan 和 zoom 的“原生”支持，所以我使用了一个 jQuery 库：Ariutta SVG Pan and Zoom

使用 Ariutta SVG pan&zoom，我还应该能够收听移动事件，例如 pinch 和 touch。

这里是javascript代码：

<div id="mapArea">
     <svg id="map" xmlns="http://www.w3.org/2000/svg" x="0" y="0" style="stroke: #00ff00; stroke-width: 0.2px;background:#000">
     </svg>
</div>

<script type="text/javascript">
    var container = document.getElementById('mapArea'),
        width = container.offsetWidth,
        svgMap = document.getElementById('map');

    svgMap.setAttribute('width', width);
    svgMap.setAttribute('height', width * 0.5);

    $(document).ready(function () {

        $.ajax({
            type: "GET",
            url: "/Public/GetSVGPlan.aspx?building=1423&floor=3",
            dataType: "text",
            success: function (result) {
                svg = parseSVG(result);
                svgMap.appendChild(svg);
                svgPanZoom('#map', {
                    zoomEnabled: true,
                    controlIconsEnabled: true,
                    fit: true,
                    center: true
                });
            },
            error: function (error) {
                console.log(error);
            }
        });
    });
</script>

API 返回的路径元素如下：

<path d="M173.7043 66.758, L173.7054 66.7701" />
<path d="M191.947 64.2563, L191.9198 63.9453" />
<path d="M129.3072 12.2843, L129.3301 12.3702" />
<path d="M129.3301 12.3702, L131.701 11.735" />
<path d="M191.6087 63.9725, L191.636 64.2836" />
<path d="M173.7054 66.77, L172.5553 66.9803" />
<path d="M131.3573 11.735, L129.3072 12.2843" />
<path d="M195.8466 63.9148, L195.8194 63.6037" />
<path d="M172.5553 66.9803, L172.6882 66.9687" />
<path d="M129.3074 12.2841, L129.2449 11.7366" />
<path d="M195.7694 63.6081, L195.8194 63.6037" />
<path d="M172.6882 66.9687, L173.7064 66.7821" />
<path d="M129.2451 11.7368, L129.2451 9.5381" />
<path d="M195.5083 63.631, L201.43 63.1124" />
<path d="M226.9927 14.458, L228.0006 14.4593" />
<path d="M173.7064 66.7821, L173.7075 66.7942" />
<path d="M129.2451 9.5381, L131.6964 9.5381" />
<path d="M201.4572 63.4235, L195.5356 63.9421" />

结果：

在 Internet Explorer 11 上非常慢，渲染过程使用大量 CPU 大约 15 秒。我认为这更多是由于用于附加路径元素的 js 循环，而不是 SVG 渲染。

在移动设备上（Chrome on Android）具有良好的响应和快速加载/渲染（~3-5s）

即使它按预期工作，也非常欢迎任何提高性能的建议！！