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

Question

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

当前，已读取AutoCAD文件并将其转换为XML文件，该文件包含表示平面图对象（房间，墙壁，资产等）的多边形的X和Y坐标。图形中的对象是可单击的，可以设置为可见或不取决于主题观点。

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

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

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

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

因此，现在我要问的是，即使我需要映射2D对象并且这是选择正确的技术，像threeJS这样的库是否也可以轻松完成这样的任务。特别是，可以使用threeJS：

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

如果有人知道更好的库或技术可以完成此任务，那么我完全可以提出任何建议。

（请注意，我只需要2D工程图，因为已经使用Revit的其他技术构建了3D）

Answer 1

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

它的加载速度绝对比 GeoJSON Leaflet 度量地图快。

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

为了将字符串路径元素附加到 SVG DOM 元素，我使用了parseSVG 库。

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

通过 Ariutta SVG pan&zoom，我应该还能够监听移动事件，例如捏合和触摸。

这是 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 渲染。

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

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