最近專案中需要用到地圖監控,需求:
1.cad檔案直接解析,web顯示
2.可以放大縮小、平移
3.可以顯示小車運動位置及軌跡
4.點選小車可以顯示相關資訊
如果覺得對你有幫助,幫忙給個星。
這裡只加入地圖匯入、放大、縮小、平移功能。
網上檢視了些質料,沒用可供修改的。有個thres.js框架做的解析,感覺太龐大。後來就自己寫。
整體流程:
1.cad檔案另存為dxf檔案。
2.c#後台讀取dxf檔案,用第三方框架netdxf解析。這次只解析了部分元素,後續繼續完善
3.前端拿到資料,通過畫布畫出。
直接上個結果圖:
js核心**:
(function (w)上面為監控新增裝置圖:**就不貼了,業務不可能一樣。//給原型擴充套件方法
mapdxf.prototype =,
//**********====縮放及移動邏輯start********************
//移**層
//繫結事件
_bind()
//eslint-disable-next-line space-before-function-paren
this.docbind.onmousemove = function (evt)
}//eslint-disable-next-line space-before-function-paren
this.docbind.onmouseup =function ()
//eslint-disable-next-line space-before-function-paren
this.docbind.onmousewheel = this.docbind.onwheel = function (event)
else
}//移動畫布使畫布在滑鼠處縮放
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)
let maxpoint
const maxy = this.data.maxx * this.height / this
.width
if (maxy > this
.data.maxy)
} else
}//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)
else
})},
//將cad地圖座標轉換為cancas座標
convertx(coord) ,
converty(coord) ,
convert(coord) ,
drawline(data) ,
drawlightweightpolyline(data) )
if(data.isclose)
this
.ctx.stroke()
},drawcircle(data)
},circle() ,
drawtext(data) ,
//**********====畫地圖邏輯end********************
_getrad(degree)
}//向外部暴露物件
w.getmapdxf =function (id, width, height)
}(window));
思路:1.軌跡用另外乙個圖層來畫。
2.其他裝置,放在乙個div裡面統一管理。
2.1 縮放:地圖圖層和其他圖層共同縮放。
2.2 移動:地圖圖層和其他圖層共同移動。
web頁面json資料的解析顯示
由於json資料格式的簡潔,語法簡單,越來越受到web開發者的重視,在頁面的非同步載入上有明顯的優勢 優於xml 例項 頁面後台 ashx處理檔案 datatable轉換為json datatable物件 json字串 頁面head js部分,引入jquery開發框架 頁面body部分,動態載入下拉...
AE新增CAD檔案
void caoex1view onaddcad cstring strfilter strfilter auto cad dxf dxf auto cad dwg dwg cfiledialog pdlg true,null,null,ofn allowmultiselect ofn explor...
CAD批量合併檔案
要求 將整飾完成504幅單獨的宗地圖合併成一張總圖,合併後,去掉其他要素,只保留畢合的權屬線。解決 1.合併dwg檔案,除了手工貼上複製外,最先想到的是插入塊,即用insert命令插入,測試結果可行 這裡需要注意的是檔案的路徑,預設windows複製過來的路徑是 e 石安村副 51340121220...