Question

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

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

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

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

以下示例由18630行对象组成，在平移时不是很活跃。

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

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

将事件监听器分配给对象以获取其ID？
要将CSS3规则应用于样式对象，例如，突出显示房间或表格吗？
ThreeJS可以轻松绘制到SVG或Canvas元素吗？
使用ThreeJS，我可以轻松管理平移和缩放吗？
是否也可以在移动设备上显示？（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

根据费拉建议，我已经在SVG中实现了可视化，画出由18630行组成的相同模型。

它的加载速度肯定比GeoJSON Leaflet指标图快。

SVG由查询构建和楼层的API提供，它将体系结构作为元素（text / plain）返回，我将其附加到网页中的元素。

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

我还没找到一个＆＃34;本地人＆＃34;支持 pan 和 zoom ，因此我使用了jQuery库：Ariutta SVG Pan and Zoom

借助Ariutta SVG pan＆amp; 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渲染。

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

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

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

2 个答案: