web中预览dwg文件

530 阅读1分钟

web中预览dwg文件

该方式是使用 dwg2svg 来将dwg文件转换为svg文件,然后使用leaflet.js来进行预览。demo 效果预览:

image.png

步骤

  1. 安装使用dwg2svg
  2. 在项目使用leaflet.js展示

安装使用dwg2svg

  1. 下载 dwg2svg 并解压到任意目录。 image.png
  2. 转换dwg文件为svg文件 image.png

在项目使用leaflet.js展示

html代码demo如下:

</head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
    <style>
        #map {
            height: 100%;
            width: 100%;
             background-color: #424242; /* 背景颜色 */
        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        var map = L.map('map', {
            attributionControl: false,
            zoomSnap: 0.4,
            zoomDelta:0.4,
        }).setView([30.55, 114.87], 9);

        // SVG 图像的 URL
        var svgUrl = './tta3.svg';

        var bounds = [[29.02, 112.82], [32.08, 116.92]];

        // 使用 imageOverlay 加载 SVG
        L.imageOverlay(svgUrl, bounds).addTo(map);

    </script>
</body>