目前室內三維地圖如何輕量化，能夠在手機微信、電腦瀏覽器等平臺快速顯示地圖，顯示的地圖性能好，轉動地圖不卡是大家都要面對的問題，
使用室內三維地圖引擎ESMap后目前可以不用操心這方面的問題，開發只需要關心設備如何加到地圖上進行管理，本文章主要介紹攝像頭圖層、消防設備圖層和人員軌跡圖層進行介紹，方便大家直接整合到自己的專案中，
本文簡單的介紹使用ESmap的SDK開發地圖簡單的設備圖層管理的程序，若有不足，歡迎指正，
開發程序如下：
首先創建好地圖后，我在地圖上增加了樓層控制控制元件、放大縮小控制元件和二三維切換控制元件，如下圖：
利用ESMap地圖平臺的地圖點擊事件在地圖上選取所有設備的位置坐標，然后整理成自己需要的json資料，
//地圖加載完成回呼
//地圖加載完成回呼
map.on('loadComplete', function () {
floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);//創建樓層控制元件
var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);//創建放大縮小控制元件
bingEvents();//系結按鈕點擊事件
loadDeviceData();//加載自己構造好的json格式資料
});
1.創建后臺json資料，并引入資料
所有的設備真實專案中都采用資料庫后臺來管理，我們演示就直接省去后臺管理，直接使用設備基本資訊資料存盤在JSON檔案中，這樣就可以直接方便演示；
在地圖加載完成后獲取自己需要的資料：
json資料格式如下圖：
//加載圖層資料
function loadDeviceData(){ $.getJSON("device.json", function (data) { if(data){ var devices = data.devices; for (let i = 0; i < devices.length; i++) { const obj = devices[i]; addDeviceMarker(obj);//在地圖上添加設備marker } } }); $.getJSON("baoan.json", function (data) { if(data){ var baoan = data.data; for (let i = 0; i < baoan.length; i++) { const obj = baoan[i]; addTextMarker(obj); //在地圖上添加安保人員marker } } }); }
2.封裝加載設備圖層marker方法
將上面的資料決議后，直接寫代碼在室內三維地圖上進行相關圖片marker展示，
//在地圖上添加設備marker function addDeviceMarker(obj){ //通過名字區別創建不同的layer var floorLayer = map.getFloor(obj.fnum); //獲取第一層的樓層物件 var layer=floorLayer.getOrCreateLayerByName("device"+obj.type,esmap.ESLayerType.IMAGE_MARKER);//"device"+type 隱藏/洗掉的時候用 var url= 'image/'+obj.type+'.png'; var angle=null; if(obj.hasOwnProperty("angle"))angle=obj.angle; im = new esmap.ESImageMarker({ x:obj.x, //坐標x y:obj.y, //坐標y url:url, //圖片標注的圖片地址 size: obj.size, //圖片大小 或者 size:{w:32,h:64}, angle:angle, spritify:true, //跟隨地圖縮放變化大小，默認為true，可選引數 height:1, //距離地面高度 showLevel: 20, //地圖縮放等級達到多少時隱藏,可選引數 seeThrough: false, //是否可以穿透樓層一直顯示,可選引數 id: obj.id, //id，可自定義 name:obj.name //name可自定義 }); im.deviceType=obj.type; //自定義屬性-用于點擊事件中區分點擊的是什么型別的設備 layer.addMarker(im); //將imageMarker添加到圖層 floorLayer.addLayer(layer); //將圖層添加到樓層物件 }
效果如下圖：
3.封裝文字加圖片marker方法
//在地圖上添加安保人員marker function addTextMarker(obj){ //通過名字區別創建不同的layer var floorLayer = map.getFloor(obj.fnum); //獲取第一層的樓層物件 var layer=floorLayer.getOrCreateLayerByName("device"+obj.type,esmap.ESLayerType.TEXT_MARKER);//"device"+type 隱藏/洗掉的時候用 var url= 'image/'+obj.type+'.png'; var tm = new esmap.ESTextMarker({ x:obj.x, //坐標x y:obj.y, //坐標y id: obj.id, //id，可自定義 image: url, //圖片標注的圖片地址 imageAlign:'bottom', //圖片方位left,top,right,bottom imageSize:obj.size, //圖片大小 name:obj.name, //文字名稱 spritify:true, //跟隨地圖縮放變化大小,默認為true,可選引數 scale:1, //文字等級縮放默認為1,可選引數,0.1表明縮小10倍 height:1, //距離地面高度 showLevel: 20, //地圖縮放等級達到多少時隱藏,可選引數 fillcolor: "255,0,0", //填充色 fontsize: "18", //字體大小 strokecolor: "255,255,0", //邊框色 strokewidth:2 //邊框厚度 0表示無邊框 }); tm.deviceType=obj.type; //自定義屬性-用于點擊事件中區分點擊的是什么型別的設備 tm.routePoints=obj.routePoints; //人員的移動路徑 baoanMakrker.push(tm); layer.addMarker(tm); //將imageMarker添加到圖層 floorLayer.addLayer(layer); //將圖層添加到樓層物件 baoanMoveRoute();//控制保安的移動 }
效果如下圖：
4.控制地圖marker移動
//控制保安的移動 function baoanMoveRoute(){ if(baoanMakrker && baoanMakrker.length>0){ var index=0; setInterval(function(){ for (let i = 0; i < baoanMakrker.length; i++) { const bamarker = baoanMakrker[i]; var routePoints=bamarker.routePoints; var point=routePoints[index]; bamarker.moveTo({x: point.x,y: point.y,time:0})//移動marker } index++; if(index==5){ index=0; } },2000); } }
以上是將設備添加到地圖上的程序，
5.控制圖層的顯示和隱藏
在添加設備Marker的時候會取一個圖層name，可以根據這個name控制圖層的顯示和隱藏
封裝方法為：
//根據名字顯示或隱藏設備圖層 function hideOrShowLayer(params,isshow){//params格式['device1','device2',...] isshow:true/fasle var fnums = map.floorNums;//獲取地圖所有樓層[1,2,3] for(var i=0;i<fnums.length;i++){ var floor = map.getFloor(fnums[i]); var res = floor.getLayersByNames(params); if(res) res.visible = isshow; } };
全部圖層顯示：
隱藏攝像頭：
6.點擊地圖marker彈出氣泡資訊
首先在點擊事件回呼中判斷點擊的是否是自己添加的marker
//地圖點擊事件回呼 map.on('mapClickNode', function(event) { console.log(event); if(event && event.hasOwnProperty("deviceType")){//這里判斷點擊的是否是自己新增的設備marker showPop(event); } });
封裝彈出氣泡標注方法：
var popMarker=null; function showPop(data) {//點擊marker 彈出基本資訊 if(popMarker) popMarker.close(); var types={"1":"攝像頭","2":"消防設備","3":"保安"}; var className = "close-"+data.ID; //生成唯一的class，用于關閉 if(data.deviceType!=1){//如果點擊的不是攝像頭 popMarker = new esmap.ESPopMarker({ mapCoord: { //設定彈框的x軸 x: data.x, //設定彈框的y軸 y:data.y, height: 3.5, //控制資訊窗的高度 //設定彈框位于的樓層 fnum: data.FloorNum }, className:"rock-box m-pop", //自定義popMarker樣式，在css里配置 //設定彈框的寬度 width: 300, //設定彈框的高度 height: 150, // marginTop:10, //彈框距離地面的高度 //設定彈框的內容 content: ` <div ><span style="margin: 20px;">資訊彈框</span></div> <div > <div > <p>
<span >id</span> <span >名稱</span> <span >型別</span> </p> <p> <span >${data.ID}</span> <span >${data.name}</span> <span >${types[data.deviceType]}</span> </p> </div> </div> <div ></div> `, closeCallBack: function () { //資訊窗點擊關閉操作 }, created: function (e) { //創建完成鉤子 $("."+className).on('click',function(){ //為自定義關閉按鈕系結隱藏事件 popMarker.close(); }) } }); }else{//點擊攝像頭 popMarker = new esmap.ESPopMarker({ mapCoord: { //設定彈框的x軸 x: data.x, //設定彈框的y軸 y:data.y, height: 3.5, //控制資訊窗的高度 //設定彈框位于的樓層 fnum: data.FloorNum }, className:"rock-box m-pop", //自定義popMarker樣式，在css里配置 //設定彈框的寬度 width: 300, //設定彈框的高度 height: 220, // marginTop:10, //彈框距離地面的高度 //設定彈框的內容 content: ` <div ><span>${data.name}</span></div> <div > <video style="width: 100%;height: 100%;" controls autoplay> <source src="https://www.cnblogs.com/esmap/p/1.mp4" type="video/mp4"> </video> </div> <div ></div> `, closeCallBack: function () { //資訊窗點擊關閉操作 }, created: function (e) { //創建完成鉤子 $("."+className).on('click',function(){ //為自定義關閉按鈕系結隱藏事件 popMarker.close(); }) } }); } }
彈框樣式可以自定義修改
彈框效果如下：
以下是整體效果圖：
以上就是我用ESMap的地圖開發的圖層控制功能，感興趣的小伙伴快試一下吧！
以上內容體驗鏈接：訪問鏈接
可用使用手機微信測驗我們的室內三維地圖加載速度和展示性能，
Thank you for reading!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/136696.html
標籤：JavaScript