CAD文件解析web显示

最近项目中需要用到地图监控，需求：

1.CAD文件直接解析，web显示

2.可以放大缩小、平移

3.可以显示小车运动位置及轨迹

4.点击小车可以显示相关信息

完整代码下载地址：https://gitee.com/zhuyapeng/cad_file_web_display

如果觉得对你有帮助，帮忙给个星。

这里只加入地图导入、放大、缩小、平移功能。

网上查看了些质料，没用可供修改的。有个Thres.js框架做的解析，感觉太庞大。后来就自己写。

整体流程：

1.CAD文件另存为dxf文件。

2.c#后台读取dxf文件，用第三方框架netDxf解析。这次只解析了部分元素，后续继续完善

3.前端拿到数据，通过画布画出。

直接上个结果图：

 js核心代码：

(function (w) {
    function MapDXF(id, width, height) {
        this.docBind = document.getElementById(id)
        this.width = width
        this.height = height
        this.ctx = undefined // 画笔
        this.docCancas = undefined // 画布
        this.data = undefined // 数据
        this.layer = undefined
        this.coverages = ['mapCanvas'] // 所有图层ID

        // 初始化地图计算数据
        this.scale = 1 // 总图比例
        this.drawScale = 1 // 初始化画地图比列
        this.offsetX = 0 // 画图偏移量
        this.offsetY = 0 // 画图偏移量
        this.margin = 0 // 外边距
        this.drawFuns = [] // 画图方法
        this.cancasWidth = width // 当前画布宽
        this.cancasHeight = height // 当前画布高

        this.mouseX = 0
        this.mouseY = 0
        this.leftX = 0
        this.topY = 0
        this.dragging = false
        this.zoomStepLength = 0.2// 缩放步长
        this.textScale = 1 // 文字对比cad缩放比例
        this.lineWidth = 0.66 // 线宽
        this.lineColor = '#fff'

        this.zoomWidth = 1
        this.translateX = 0
        this.translateY = 0

        this.zoomTranslateX = 0
        this.zoomTranslateY = 0
        // 创建画布
        this._addCanvas()
        // 绑定事件
        this._bind()
    }

    // 给原型扩展方法
    MapDXF.prototype = {

        constructor: MapDXF,
        _addCanvas() {
            // 图层层画地图外面层
            const layer = document.createElement('div')
            layer.id = 'layer'
            layer.style.position = 'absolute'
            layer.classList.add('layer')

            // 画布图层
            const canvas = document.createElement('canvas')
            canvas.id = 'mapCanvas'
            canvas.classList.add('mapCanvas')
            canvas.width = this.width * this.scale
            canvas.height = this.height * this.scale
            layer.appendChild(canvas)

            this.docBind.innerHTML = ''
            this.docBind.appendChild(layer)

            // 初始化画布元素
            this.layer = document.getElementById('layer')
            this.docCancas = document.getElementById('mapCanvas')
            this.ctx = this.docCancas.getContext('2d')
        },

        // ==============缩放及移动逻辑start====================
        // 移动图层
        // 绑定事件
        _bind() {
            const _this = this
            // eslint-disable-next-line space-before-function-paren
            this.docBind.onmousedown = function (event) {
                _this.dragging = true
                _this.mouseX = event.clientX
                _this.mouseY = event.clientY
            }
            // eslint-disable-next-line space-before-function-paren
            this.docBind.onmousemove = function (evt) { // 移动
                if (_this.dragging) {
                    const moveX = evt.clientX - _this.mouseX
                    const moveY = evt.clientY - _this.mouseY
                    _this.mouseX = evt.clientX
                    _this.mouseY = evt.clientY
                    _this.translateX += (moveX / _this.zoomWidth)
                    _this.translateY += (moveY / _this.zoomWidth)

                    _this.draw()
                }
            }
            // eslint-disable-next-line space-before-function-paren
            this.docBind.onmouseup = function () {
                _this.dragging = false
            }
            // eslint-disable-next-line space-before-function-paren
            this.docBind.onmousewheel = this.docBind.onwheel = function (event) { // 滚轮放大缩小
                // 放大缩小思路：计算放大缩小倍数、画线同样放大收缩
                // event.wheelDelta > 0//放大 缩小
                let zoom
                if (event.wheelDelta > 0) {
                    _this.zoomWidth += _this.zoomStepLength
                    zoom = -_this.zoomStepLength
                } else {
                    _this.zoomWidth -= _this.zoomStepLength
                    zoom = _this.zoomStepLength
                    if (_this.zoomWidth <= 0.2) {
                        alert('地图已经最小,无法再缩小')
                        _this.zoomWidth += _this.zoomStepLength
                        return
                    }
                }

                // 移动画布使画布在鼠标处缩放
                const box = _this.docCancas.getBoundingClientRect()
                const x = event.clientX - box.left
                const y = -(_this.docCancas.height - (event.clientY - box.top))

                _this.zoomTranslateX = _this.zoomTranslateX + x * zoom
                _this.zoomTranslateY = _this.zoomTranslateY + y * zoom

                _this.draw()
            }
        },
        // ==============缩放及移动逻辑end====================
        // ==============画地图逻辑start====================
        init(data) {
            this.data = data
            // 初始所有图像都放在地图显示，此时只能放大不能缩小
            // 1.计算最大和最小两点
            // 下基准点取最小坐标，为0，0点
            const minPoint = { x: this.data.MinX, y: this.data.MinY }

            let maxPoint

            const maxY = this.data.MaxX * this.height / this.width
            if (maxY > this.data.MaxY) {
                maxPoint = { x: this.data.MaxX, y: maxY }
            } else {
                maxPoint = { x: this.data.MaxY * this.width / this.height, y: this.data.MaxY }
            }

            // 2.计算比例 （最大点X-最小点X+20预留边距离）
            this.drawScale = this.width / (maxPoint.x - minPoint.x)

            // 3.计算偏移（原点-最小点+边距）
            this.offsetX = 0 - minPoint.x
            this.offsetY = 0 - minPoint.y

            // 添加画图方法
            this.drawFuns = []
            this.drawFuns.Text = this.drawText
            this.drawFuns.Line = this.drawLine
            this.drawFuns.LightWeightPolyline = this.drawLightWeightPolyline
            this.drawFuns.Circle = this.drawCircle

            // 画图
            this.draw()
        },
        // 绘制
        draw(x, y) {
            // 画布原点位置为左上角，将其转换笛卡尔坐标轴
            this.ctx.clearRect(-this.docCancas.width * 500, -this.docCancas.height * 500, this.docCancas.width * 1000, this.docCancas.height * 1000)

            this.ctx.lineWidth = this.lineWidth
            this.ctx.strokeStyle = this.lineColor
            const map = this.data.Map
            map.forEach(e => {
                if (this.drawFuns[e.Type]) {
                    this.drawFuns[e.Type].call(this, e)
                } else {
                    console.log('类型未找到：' + e.Type)
                }
            })
        },
        // 将CAD地图坐标转换为cancas坐标
        convertX(coord) {
            // 1.偏移
            coord = coord + this.offsetX
            let x = this.convert(coord)

            x = x + this.translateX * this.zoomWidth + this.zoomTranslateX

            return x
        },
        convertY(coord) {
            // 1.偏移
            coord = coord + this.offsetY

            const y = this.convert(coord)
            // 计算Y轴偏移及反转
            let yy = this.docCancas.height - y

            yy = yy + this.translateY * this.zoomWidth + this.zoomTranslateY

            return yy
        },
        convert(coord) {
            // 2.初始缩放
            coord = coord * this.drawScale
            // 3.地图缩放
            coord = coord * this.zoomWidth

            return coord
        },
        drawLine(data) {
            const points = data.Points

            this.ctx.beginPath()

            this.ctx.moveTo(this.convertX(points[0].X), this.convertY(points[0].Y))
            this.ctx.lineTo(this.convertX(points[1].X), this.convertY(points[1].Y))
            this.ctx.stroke()
        },
        drawLightWeightPolyline(data) {
            const points = data.Points.slice(0, data.Points.length)

            this.ctx.beginPath()

            this.ctx.moveTo(this.convertX(points[0].X), this.convertY(points[0].Y))
            points.shift()
            points.forEach(e => {
                this.ctx.lineTo(this.convertX(e.X), this.convertY(e.Y))
            })
            if (data.IsClose) {
                this.ctx.closePath()
            }
            this.ctx.stroke()
        },
        drawCircle(data) {
            if (data.Radius > 0) {
                const point = data.Point
                this.ctx.beginPath()
                this.ctx.arc(this.convertX(point.X), this.convertY(point.Y), this.convert(data.Radius), 0, 2 * Math.PI)
                this.ctx.stroke()
            }
        },
        circle() {
            this.ctx.beginPath()
            this.ctx.arc(this.convertX(250), this.convertY(250), 4, 0, 2 * Math.PI)
            this.ctx.arc(this.convertX(0), this.convertY(0), 4, 0, 2 * Math.PI)
            this.ctx.stroke()
        },
        drawText(data) {
            const point = data.Point
            const x = this.convertX(point.X)
            const y = this.convertY(point.Y)

            this.ctx.beginPath()
            this.ctx.font = this.convert(data.Height) * this.textScale + 'px 微软雅黑'
            this.ctx.fillStyle = this.lineColor
            this.ctx.fillText(data.Value, x, y)
            this.ctx.stroke()
        },
        // ==============画地图逻辑end====================
        _getRad(degree) {
            return degree / 180 * Math.PI
        }
    }

    //向外部暴露对象
    w.getMapDXF = function (id, width, height) {
        return new MapDXF(id, width, height)
    }

}(window));

 上面为监控添加设备图：代码就不贴了，业务不可能一样。

思路：

1.轨迹用另外一个图层来画。

2.其他设备，放在一个div里面统一管理。

2.1 缩放：地图图层和其他图层共同缩放。

2.2 移动：地图图层和其他图层共同移动。