??最近朋友有個(gè)項(xiàng)目需要幫忙盯仪，于是抽空用mapbox gl幫他實(shí)現(xiàn)了一個(gè)室內(nèi)地圖展示的Demo幻捏。先來(lái)看看最終呈現(xiàn)效果吧：
室內(nèi)地圖展示.gif
CAD數(shù)據(jù)處理
??首先是室內(nèi)設(shè)計(jì)圖紙要從CAD轉(zhuǎn)換為shp文件辱揭。主要通過(guò)Arcmap的CAD至地理數(shù)據(jù)庫(kù)的功能先將其轉(zhuǎn)換為地理數(shù)據(jù)庫(kù)中的數(shù)據(jù)丈氓，得到結(jié)果如下圖所示：
CAD至地理數(shù)據(jù)庫(kù).jpg
結(jié)果.jpg
由于這邊對(duì)于地理位置沒(méi)有精確要求局冰，就選了個(gè)合適的位置做了處理舅踪，最終室內(nèi)圖的原始shp數(shù)據(jù)展示如下：
室內(nèi)圖shp.jpg
代碼實(shí)現(xiàn)：
??這里偷了個(gè)懶稼病，直接用了同事從高德?lián)高^(guò)來(lái)的樓層列表進(jìn)行樓層的展示控制选侨。同時(shí)，為了方便demo的部署然走，直接將shp轉(zhuǎn)成了json文件進(jìn)行加載援制，省去了圖層服務(wù)的發(fā)布。
??樓層控制主要通過(guò)layer的setFilter和source的setData的方法來(lái)改變的：
function changeData(layerName, FlrCode, BKUID) {
var data = map.getSource(layerName)._data;
for (var i = 0; i < data.features.length; i++) {
if (data.features[i].properties.BKUID == BKUID) {
if (data.features[i].properties.FlrCode == FlrCode) {
data.features[i].properties.Visible = 1
} else {
data.features[i].properties.Visible = 0
}
}
};
map.getSource(layerName).setData(data);
}
function changeVisible(FlrCode, BKUID, FlrID, index) {
currentFloorId = FlrID;
changeData(floorLayer, FlrCode, BKUID)
changeData(unitLayer, FlrCode, BKUID)
changeData(textLayer, FlrCode, BKUID)
// 調(diào)整 docker 的位置
document.getElementById('floorList').scrollTop = (index) * 59;
// 設(shè)置上下按鈕的狀態(tài)
if (index === 0) {
document.getElementById('floorPlus').classList.add('disabled');
} else {
document.getElementById('floorPlus').classList.remove('disabled');
}
if (index === floorList.features.length - 1) {
document.getElementById('floorMinus').classList.add('disabled');
} else {
document.getElementById('floorMinus').classList.remove('disabled');
}
}
??最終實(shí)現(xiàn)效果就如開(kāi)頭所示芍瑞。這里還有mapbox的pitch角度>60的設(shè)置問(wèn)題晨仑，后面會(huì)單獨(dú)寫一篇記錄下。
??最近還基于mapbox gl+three做了一些三維可視化的地圖效果，后面有時(shí)間也記錄下洪己。
??
