CAD⽂件解析web显⽰最近项⽬中需要⽤到地图监控，需求：
1.CAD⽂件直接解析，web显⽰
2.可以放⼤缩⼩、平移
3.可以显⽰⼩车运动位置及轨迹
4.点击⼩车可以显⽰相关信息
完整代码下载地址：
如果觉得对你有帮助，帮忙给个星。judy garland
这⾥只加⼊地图导⼊、放⼤、缩⼩、平移功能。
⽹上查看了些质料，没⽤可供修改的。有个Thres.js框架做的解析，感觉太庞⼤。后来就⾃⼰写。
整体流程：
1.CAD⽂件另存为dxf⽂件。
2.c#后台读取dxf⽂件，⽤第三⽅框架netDxf解析。这次只解析了部分元素，后续继续完善
3.前端拿到数据，通过画布画出。
直接上个结果图：
js核⼼代码：
(function (w) {
function MapDXF(id, width, height) {
this.docBind = ElementById(id)
this.width = width
this.height = height
< = undefined // 画笔
this.docCancas = undefined // 画布
this.data = undefined // 数据
this.layer = undefined
/
/ 初始化地图计算数据
this.scale = 1// 总图⽐例
this.drawScale = 1// 初始化画地图⽐列
this.offtX = 0// 画图偏移量
this.offtY = 0// 画图偏移量
this.margin = 0// 外边距
this.drawFuns = [] // 画图⽅法
this.cancasWidth = width // 当前画布宽
this.cancasHeight = height // 当前画布⾼
this.leftX = 0
this.dragging = fal
this.lineWidth = 0.66// 线宽
this.lineColor = '#fff'
// 创建画布
this._addCanvas()
// 绑定事件
this._bind()
}
客户经理竞聘演讲稿// 给原型扩展⽅法
MapDXF.prototype = {
constructor: MapDXF,
_addCanvas() {
红蜡笔// 图层层画地图外⾯层
const layer = ateElement('div')
layer.id = 'layer'
layer.style.position = 'absolute'
layer.classList.add('layer')
// 画布图层
const canvas = ateElement('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 = ElementById('layer')
this.docCancas = ElementById('mapCanvas')
< = Context('2d')
},
// ==============缩放及移动逻辑start====================
// 移动图层
// 绑定事件
_bind() {
const _this = this
// eslint-disable-next-line space-before-function-paren
udown = function (event) {
_this.dragging = true
_uX = event.clientX
_uY = event.clientY
}
// eslint-disable-next-line space-before-function-paren
umove = function (evt) { // 移动
if (_this.dragging) {
const moveX = evt.clientX - _uX
const moveY = evt.clientY - _uY
_uX = evt.clientX
_uY = evt.clientY
_anslateX += (moveX / _Width)
_anslateY += (moveY / _Width)
_this.draw()
}
}
// eslint-disable-next-line space-before-function-paren
uup = function () {
_this.dragging = fal
}
// eslint-disable-next-line space-before-function-paren
uwheel = wheel = function (event) { // 滚轮放⼤缩⼩ // 放⼤缩⼩思路：计算放⼤缩⼩倍数、画线同样放⼤收缩
// event.wheelDelta > 0//放⼤缩⼩
let zoom
if (event.wheelDelta > 0) {
_Width += _StepLength
zoom = -_StepLength
} el {
_Width -= _StepLength
zoom = _StepLength
if (_Width <= 0.2) {
alert('地图已经最⼩,⽆法再缩⼩')
_Width += _StepLength
return
}
}
// 移动画布使画布在⿏标处缩放
const box = _BoundingClientRect()
const x = event.clientX - box.left
const y = -(_this.docCancas.height - (event.clientY - p))
_TranslateX = _TranslateX + x * zoom
_TranslateY = _TranslateY + 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 }
} el {
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.offtX = 0 - minPoint.x
this.offtY = 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) {
// 画布原点位置为左上⾓，将其转换笛卡尔坐标轴
grape
const map = this.data.Map
map.forEach(e => {
if (this.drawFuns[e.Type]) {
this.drawFuns[e.Type].call(this, e)
} el {
console.log('类型未找到：' + e.Type)
2014浙江高考英语
}
})
},
// 将CAD地图坐标转换为cancas坐标
convertX(coord) {
// 1.偏移
coord = coord + this.offtX
let x = vert(coord)
x = x + anslateX * Width + TranslateX
return x
},
convertY(coord) {
// 1.偏移
coord = coord + this.offtY
const y = vert(coord)
// 计算Y轴偏移及反转
let yy = this.docCancas.height - y
yy = yy + anslateY * Width + TranslateY
return yy
},
convert(coord) {
// 2.初始缩放
coord = coord * this.drawScale
// 3.地图缩放
coord = coord * Width
return coord
},
drawLine(data) {
const points = data.Points
shh
},
drawLightWeightPolyline(data) {
const points = data.Points.slice(0, data.Points.length)
points.shift()
points.forEach(e => {
})
if (data.IsClo) {
}
},
drawCircle(data) {
if (data.Radius > 0) {
const point = data.Point
}
},
circle() {
},
drawText(data) {
const point = data.Point
const x = vertX(point.X)
const y = vertY(point.Y)
},
// ==============画地图逻辑end====================
_getRad(degree) {
return degree / 180 * Math.PI
}
}
篮球训练营//向外部暴露对象
return new MapDXF(id, width, height)
}
}(window));
上⾯为监控添加设备图：代码就不贴了，业务不可能⼀样。
思路：
1.轨迹⽤另外⼀个图层来画。
2.其他设备，放在⼀个div⾥⾯统⼀管理。
英语外教机构排名
2.1 缩放：地图图层和其他图层共同缩放。
2.2 移动：地图图层和其他图层共同移动。
