如何用webgl(three.js)搭建不規則建築模型，客流量熱力圖模擬
本節課主要講解如何用webgl(three.js)搭建一個建築模型，客流量熱力圖模擬css
使用技術說明：html
這裏主要用到了three.js，echart.js以及一些其它的js 與css技術，利用websoket作實時數據傳輸。jquery
技術亮點：web
用代碼實現不規則建築三維模型，模型層疊動畫、三維會話氣泡等json
實時繪製三維熱力雲圖bootstrap
三維場景內外連線技術canvas
有效控制頁面內存，及時回收繪畫內存，防止內存泄漏。瀏覽器
硬件技術：安全
利用 wifi探針 AI人臉識別技術 有效統計各個區域的客流量，清洗重複數據，提高統計算力微信
三維數據可視化執行的意義：
爲何須要可視化展現，我總結以下幾點：
a、實用性：直觀快速的展現數據，提示告警，快速定位問題，爲解決問題節省大量時間，
b、成本管理：成本對於企業來說是相當重要的，三維可視化能夠爲高層領導者，執行者提供最快捷的管理方案
c、去專業化：本着代碼改變世界的願望，可視化操控就是爲了讓更多人的可以看懂、操做所謂專業的東西，
d、科技：越是科技的東西，越須要直觀的展現，越是複雜的東西越須要簡單的描述。可視化偏偏解決了這個痛點。
e、體面：企業的數據大屏是企業的形象，三維可視化可快速提示企業高大上的企業形象，向客戶展現企業的實力與精緻，
d、輕便：這是技術的實現方式，使用電腦瀏覽器 或者手機瀏覽器直接查看三維機房，方便快捷
項目前序：
客流量控制是大型公共場所把控安全的重要節點，實時把控各個部位的客流數量，對安全引導，緊急疏散、熱門區域查看、商業規劃起到很重要的做用。
首先 咱們先在網上找兩張國家會展中心的外景宏觀圖與內部結構圖
圖一：這是國家會展中心的外部宏觀圖，四葉草的外觀（寓意繁榮詩意 「四葉草」 金秋盛情迎賓朋）（這張圖來自網絡，解釋權歸原做者全部）
圖二：這是內部場館宏觀圖（這張圖來自網絡，解釋權歸原做者全部）
界面效果：
a、首頁展現場館的3D模型整體態勢，總人數，各個場館實時客流，來源，年齡分析分類，以及各場館客流量同比異常分析
b、單擊單個場館熱力詳情，進去單個場館實時客流界面，分析場館內客流分佈於統計狀況
c、點擊全屏，全屏展現總然模型，雙擊單個場館模型，進入單個場館模型詳細展現區
d、點擊樓層選擇，分解樓層，顯示樓層內的實時客流分佈狀況
e、點擊客流範圍選擇，篩選出範圍內的客流區域，有效導航引導客流分佈，以及查看熱點分佈
重要代碼實現
1、模型代碼，用js代碼實現模型，而非導入模型文件，有效控制文件大小，提示加載渲染速度
[{ "show": true, "uuid": "", "name": "m4_base", "objType": "ExtrudeGeometry", "position": { "x": -3479.388, "y": -1010, "z": -331.275 }, "style": { "skinColor": 14283263, "side": 0, "materialType": "lambert", "opacity": 0.1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": -10, "y": 0, "type": "nomal" }, { "x": -10, "y": 1150, "type": "nomal" }, { "x": -10, "y": 1150, "type": "bezier3" }, { "x": 100, "y": 1980, "type": "bezier3" }, { "x": 1200, "y": 1960, "type": "bezier3" }, { "x": 4260, "y": 1960, "type": "nomal" }, { "x": 4260, "y": 1960, "type": "bezier3" }, { "x": 4950, "y": 1960, "type": "bezier3" }, { "x": 5250, "y": 1700, "type": "bezier3" }, { "x": 6470, "y": 500, "type": "nomal" }, { "x": 6470, "y": 500, "type": "bezier3" }, { "x": 6550, "y": 400, "type": "bezier3" }, { "x": 6550, "y": 300, "type": "bezier3" }, { "x": 6550, "y": -1150, "type": "nomal" }, { "x": 6550, "y": -1150, "type": "bezier3" }, { "x": 6480, "y": -1550, "type": "bezier3" }, { "x": 6100, "y": -1520, "type": "bezier3" }, { "x": 320, "y": -1520, "type": "nomal" }, { "x": 320, "y": -1520, "type": "bezier3" }, { "x": 50, "y": -1450, "type": "bezier3" }, { "x": -10, "y": -1150, "type": "bezier3" }, { "x": -10, "y": -1150, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 1, "curveSegments": 16, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1", "objType": "GroupObj", "scale": { "x": 1, "y": 1, "z": 1 }, "position": { "x": 0, "y": -1000, "z": 0 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "childrens": [{ "show": true, "uuid": "", "name": "m4_floor_1OBJCREN0", "objType": "DirectionalLight", "shadowCameraNear": 1, "shadowCameraFar": 5000, "shadowCameraLeft": -500, "shadowCameraRight": 500, "shadowCameraTop": 500, "shadowCameraBottom": -500, "shadowMapWidth": 1024, "shadowMapHeight": 1024, "distance": 5000, "targetName": "floor", "intensity": 1, "color": 5592405, "castShadow": true, "position": { "x": 100, "y": 1662.18, "z": 100 }, "showSortNub": 6, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "shadowCameraFov": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN1", "objType": "ExtrudeGeometry", "position": { "x": -3195.41, "y": 0, "z": 0 }, "style": { "skinColor": 668528, "opacity": 0.9 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 0, "y": 1170, "type": "nomal" }, { "x": 188, "y": 1358, "type": "nomal" }, { "x": 4758, "y": 1358, "type": "nomal" }, { "x": 6010, "y": 110, "type": "nomal" }, { "x": 6010, "y": -290, "type": "nomal" }, { "x": 6420, "y": -290, "type": "nomal" }, { "x": 6420, "y": -1600, "type": "nomal" }, { "x": 125, "y": -1600, "type": "nomal" }, { "x": 0, "y": -1480, "type": "nomal" }, { "x": 0, "y": 0, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 1, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 1.5707963267948963 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN2", "objType": "cube2", "length": 40, "width": 40, "height": 200, "x": -3051.193, "y": 100, "z": -91.682, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_behind": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_left": { "skinColor": 13233151, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 13233151, "side": 1, "opacity": 0.3 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN3", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": 1960.245, "y": 100, "z": -1604.769, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN4", "objType": "cube2", "length": 1050, "width": 6, "height": 200, "x": -3196.004, "y": 100, "z": 643.95, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 13, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 13, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 1.5707963267948966 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN5", "objType": "cube2", "length": 1650, "width": 6, "height": 200, "x": -2182.602, "y": 100, "z": 1354.415, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN6", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": -120.012, "y": 100, "z": 1354.415, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN7", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": -125.017, "y": 100, "z": -1604.769, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN8", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": -120.012, "y": 100, "z": 1144.523, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN9", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": -125.017, "y": 100, "z": -1321.688, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }, "skin_right": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 } } }, "showSortNub": 9, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "m4_floor_1OBJCREN10", "objType": "cube2", "length": 1700, "width": 6, "height": 200, "x": 1960.245, "y": 100, "z": -1318.679, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 9424639, "side": 1, "opacity": 0.2 }, "skin_down": { "skinColor": 13233151, "side": 1, "opacity": 0.2 }, "skin_fore": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_behind": { "skinColor": 6216191, "side": 1, "opacity": 0.1 }, "skin_left": { "skinColor": 7733247, "side": 1, "opacity": 0.2, "imgurl": "../../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 16, "repeaty": true, "height": 1 }
[{ "show": true, "uuid": "", "name": "m1_floor1_6", "objType": "ExtrudeGeometry", "position": { "x": -2900, "y": 0, "z": 0 }, "style": { "skinColor": 2322370, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 32, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 1.5707963267948966 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_5", "objType": "ExtrudeGeometry", "position": { "x": -2900, "y": 10, "z": 0 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 1.5707963267948966 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_3", "objType": "ExtrudeGeometry", "position": { "x": 2900, "y": 0, "z": 0 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": -1.5707963267948966 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_4", "objType": "ExtrudeGeometry", "position": { "x": 2900, "y": 10, "z": 0 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": -1.5707963267948966 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_7", "objType": "ExtrudeGeometry", "position": { "x": 0, "y": 0, "z": -2900 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_8", "objType": "ExtrudeGeometry", "position": { "x": 0, "y": 10, "z": -2900 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": -3.141592653589793 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_6_copy", "objType": "ExtrudeGeometry", "position": { "x": -2900, "y": 0, "z": 0 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 32, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 1.5707963267948966 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_1", "objType": "ExtrudeGeometry", "position": { "x": 0, "y": 0, "z": 2900 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }, { "x": 800, "y": -30, "type": "nomal" }, { "x": 830, "y": -60, "type": "nomal" }, { "x": 860, "y": -100, "type": "nomal" }, { "x": 870, "y": -120, "type": "nomal" }, { "x": 880, "y": -140, "type": "nomal" }, { "x": 900, "y": -200, "type": "nomal" }, { "x": 910, "y": -250, "type": "nomal" }, { "x": 925, "y": -320, "type": "nomal" }, { "x": 935, "y": -380, "type": "nomal" }, { "x": 990, "y": -800, "type": "nomal" }, { "x": 1010, "y": -900, "type": "nomal" }, { "x": 1070, "y": -1050, "type": "nomal" }, { "x": 1120, "y": -1055, "type": "nomal" }, { "x": 1580, "y": -1500, "type": "nomal" }, { "x": 0, "y": -2900, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 10, "curveSegments": 2, "steps": 2, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 2, "extrudePathPoints": [] }, "showSortNub": 4, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": -1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": -3.141592653589793 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_floor1_2", "objType": "ExtrudeGeometry", "position": { "x": 0, "y": 10, "z": 2900 }, "style": { "skinColor": 1658762, "materialType": "lambert", "opacity": 1 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 0, "y": 0, "type": "nomal" }, { "x": 700, "y": 0, "type": "nomal" }, { "x": 760, "y": -10, "type": "nomal" }]
2、界面搭建代碼
<!DOCTYPE html>
<html style="padding:0px;margin:0px;">
<head>
<title></title>
<meta charset="utf-8" />
<link href="../css/iconfont.css" rel="stylesheet" />
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/index.css" rel="stylesheet" />
<script src="../js/jquery-2.2.2.js"></script>
<script src="../plugs/layer/layer.js"></script>
<script src="../plugs/layer/laydate/laydate.js"></script>
<script src="../js/commonFunction.js"></script>
<script src="../js/index.js"></script>
<script src="../js/WebSocket.js"></script>
<script src="../js/index_static.js"></script>
<script src="../js/cacheData.js"></script>
<script src="../js/serverAPI.js"></script>
<script src="../plugs/echarts.min.js"></script>
</head>
<body id="bodyPage" style="padding:0px;margin:0px;" class="indexbody">
<!---主頁---------------------->
<div id="indexMainPage">
<div id="mainHeadDiv">
<table>
<tr id="mainHeadDiv_thead1">
<td id="mainHeadDiv_thead1_td_1">國家會展中心實時客流監控系統</td>
<td id="mainHeadDiv_thead1_td_2">場館實時客流圖</td>
<td id="mainHeadDiv_thead1_td_3">0000年00月00日 星期日 00:00:00</td>
</tr>
</table>
</div>
<div id="topTitle">
<table>
<tr>
<td id="topTitle_td1">場館當前人數</td>
<td id="topTitle_td2">
<span>0</span>
<span>0</span>
<font>,</font>
<span>0</span>
<span>0</span>
<span>0</span>
<font>,</font>
<span>0</span>
<span>0</span>
<span>0</span>
<font>,</font>
<span>0</span>
<span>0</span>
<span>0</span>
</td>
</tr>
</table>
</div>
<div id="leftMainDiv_ztts">
<div id="divFullScreenBtn"> 全屏 </div>
<div id="leftMainDiv_ztts_bottom_staticDiv">
<table style="width:100%;height:100%;">
<tr>
<td id="leftMainDiv_ztts_bottom_staticDiv_btns">
<button>昨天</button>
<button>今日</button>
<button>所有</button>
</td>
<td id="leftMainDiv_ztts_bottom_staticDiv_content1"></td>
<td id="leftMainDiv_ztts_bottom_staticDiv_split"></td>
<td id="leftMainDiv_ztts_bottom_staticDiv_content2"></td>
</tr>
</table>
</div>
<div id="leftMainDiv_ztts_rightTop_staticDiv">
<table id="leftMainDiv_ztts_rightTop_staticDivTable" style="width:90%;">
<tr>
<td style="width:50%" id="td_pnub_1"><font >1H</font>:<font>0</font>人</td>
<td id="td_pnub_6_1"><font>6.1H</font>:<font>0</font>人</td>
</tr>
<tr>
<td id="td_pnub_2"><font>2H</font>:<font>0</font>人</td>
<td id="td_pnub_6_2"><font>6.2H</font>:<font>0</font>人</td>
</tr>
<tr>
<td id="td_pnub_3"><font >3H</font>:<font>0</font>人</td>
<td id="td_pnub_7_1"><font >7.1H</font>:<font>0</font>人</td>
</tr>
<tr>
<td id="td_pnub_4_1"><font >4.1H</font>:<font>0</font>人</td>
<td id="td_pnub_7_2"><font>7.2H</font>:<font>0</font>人</td>
</tr>
<tr>
<td id="td_pnub_4_2"><font >4.2H</font>:<font>0</font>人</td>
<td id="td_pnub_8_1"><font >8.1H</font>:<font>0</font>人</td>
</tr>
<tr>
<td id="td_pnub_5_1"><font >5.1H</font>:<font>0</font>人</td>
<td id="td_pnub_8_2"><font>8.2H</font>:<font>0</font>人</td>
</tr>
<tr>
<td id="td_pnub_5_2"><font >5.2H</font>:<font>0</font>人</td>
<td></td>
</tr>
</table>
</div>
<div id="leftMainDiv_ztts_rightBottom_staticDiv">
<div id="leftMainDiv_ztts_rightBottom_staticDivContent">
</div>
</div>
<div id="leftMainDiv_ztts_msg">
<font id="leftMainDiv_ztts_msg_font1"> 場館當前正常 </font>
<br />
<font id="leftMainDiv_ztts_msg_font2">點擊查看詳情</font>
</div>
</div>
<div id="rightMainDiv">
<div id="rightMainDiv_ssklsh">
<div id="rightMainDiv_ssklshContent">
</div>
</div>
<div id="rightMainDiv_klsjfx">
<div id="rightMainDiv_klsjfxContent">
<table style="width:100%;height:100%;">
<tr>
<td style="width:70%;height:50%;">
<div id="rightMainDiv_klsjfxContent_1">
<table style="height:100%;width:100%;">
<tr>
<td id="rightMainDiv_klsjfxContent_1_title">來源</td>
<td id="rightMainDiv_klsjfxContent_1_chart"></td>
</tr>
</table>
</div>
</td>
<td rowspan="2">
<div id="rightMainDiv_klsjfxContent_2">
<table style="height:100%;width:100%;">
<tr>
<td id="rightMainDiv_klsjfxContent_2_title">性別</td>
</tr>
<tr>
<td id="rightMainDiv_klsjfxContent_2_chart"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td><div id="rightMainDiv_klsjfxContent_3">
<table style="height:100%;width:100%;">
<tr>
<td id="rightMainDiv_klsjfxContent_3_title">年齡</td>
<td id="rightMainDiv_klsjfxContent_3_chart"></td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!---主頁結束---------------------->
<iframe id="iframe_3d" src="3DModels.html">
</iframe>
<!---樓層---------------------->
<div id="indexFloorPage" style="display:none;">
<div id="mainHeadDiv2">
<table>
<tr id="mainHeadDiv2_thead1">
<td id="mainHeadDiv2_thead1_td_1"> 國家會展中心實時客流監控系統</br>
<font id="mainHeadDiv2_thead1_td_font">0000年00月00日 星期日 00:00:00</font>
</td>
<td id="mainHeadDiv2_thead1_td_2">場館實時客流圖</td>
<td id="mainHeadDiv2_thead1_td_3">四號館實時在館人數:4555</td>
</tr>
</table>
</div>
<div id="btn_left">
<div class="btn_floor" id="btn_floor1">
<img src="../img/pageImg/floorbtn.png" /><font>一樓</font>
</div>
<div class="btn_floor" id="btn_floor2">
<img src="../img/pageImg/floorbtn.png" /><font>二樓</font>
</div>
<div class="btn_floor" id="btn_floorAll">
<img src="../img/pageImg/floorbtn.png" /> <font>整樓</font>
</div>
</div>
<div id="btn_right">
<div class="btn_people" id="btn_p30">
<font>30-45</font><img src="../img/pageImg/floorPeople.png" /> </div> <div class="btn_people" id="btn_p20"> <font>20-35</font><img src="../img/pageImg/floorPeople.png" />
</div>
<div class="btn_people" id="btn_p10">
<font>10-25</font><img src="../img/pageImg/floorPeople.png" /> </div> <div class="btn_people" id="btn_p0"> <font>0-15</font><img src="../img/pageImg/floorPeople.png" />
</div>
</div>
</div>
<!---樓層結束---------------------->
<!---統計詳情---------------------->
<div id="indexStaticPage" style="display:none;">
<div id="mainHeadDiv3">
<table>
<tr id="mainHeadDiv3_thead1">
<td id="mainHeadDiv3_thead1_td_1"> 國家會展中心實時客流監控系統</br>
<font id="mainHeadDiv3_thead1_td_font">0000年00月00日 星期日 00:00:00</font>
</td>
<td id="mainHeadDiv3_thead1_td_2">場館實時客流圖</td>
<td id="mainHeadDiv3_thead1_td_3">實時在館總人數:4555</td>
</tr>
</table>
</div>
<div id="staticPageMain_content">
<div id="staticPage_topHalf">
<div id="staticWhereFromDiv">
<div id="staticWhereFromDivContent">
<div id="staticWhereFromDivContentTitle"> 場館來源地 </div>
<div id="staticWhereFromDivContentChart">
</div>
</div>
</div>
<div id="staticMainDiv">
<div id="staticMainDivContent">
<div id="staticMainDivContent_hitMap">
</div>
<div id="staticMainDivContent_hitMapBtn">
<div id="staticMainDivContent_hitMapBtnSpan"> </div>
<font id="staticMainDivContent_hitMapBtnfont">熱力圖</font>
</div>
</div>
</div>
<div id="staticAppDiv">
<div id="staticAppDivContent">
<div id="staticAppDivContentTitle"> APP排名 </div>
<div id="staticAppDivContentChart">
</div>
</div>
</div>
</div>
<div id="staticPage_bottomHalf">
<div id="staticAgeDiv">
<div id="staticAgeDivContent">
<div id="staticAgeDivContentTitle"> 年齡分佈 </div>
<div id="staticAgeDivContentChart">
</div>
</div>
</div>
<div id="staticRealPeopleDiv">
<div id="staticRealPeopleDivContent">
<div id="staticRealPeopleDivContentTitle">
4.1H實時客流趨勢圖 </div>
<div id="staticRealPeopleDivContentChart">
</div>
</div>
</div>
<div id="staticHistorySexDiv">
<div id="staticHistorySexDivContent">
<div id="staticHistorySexDivContentTitle"> 男女比例 </div>
<div id="staticHistorySexDivContentChart">
</div>
</div>
</div>
</div>
</div>
</div>
<!---home鍵---------------------->
<div id="homeBtn">
</div>
<!---home END---------------------->
<!---統計結束---------------------->
<script> $(function () { indexPage = new IndexPage(); indexPage.initPageUI(); cacheData = new CacheData(); cacheData.init(); serverAPI = new ServerAPI(); serverAPI.startServer(); }); </script>
</body>
</html>
3、邏輯控制代碼
1 function ModelBusiness() { } 2 ModelBusiness.prototype.init = function () { 3 var _this = this; 4 _this.currentShow = "mainModel"; 5 w3DShowObj.mouseMoveEvent = _this.mouseMoveEvent; 6 } 7 //雙擊事件 8 ModelBusiness.prototype.dbclickForeFunc = function (_obj, _face) { 9 var _this = this; 10 if (indexPage.currentShow != "main") { 11 12 if ("|m1_room_4_1|m1_room_4_2|m1_mark_4_1|m1_mark_4_2|m1_hitmap_b4_f2|m1_hitmap_b4_f1|".indexOf("|" + _obj.name + "|") >= 0) { 13 this.changeToDetailModel(function () { 14 indexPage.showLeftAndRightBottons(); 15 }); 16 } else { 17 console.log(_obj.name); 18 if (_obj.name.indexOf("m1_") >= 0) { 19 layer.msg("選中的場館無對應模型"); 20 } 21 } 22 } else { 23 console.log(_obj.name); 24 indexPage.hideDetailBtn(); 25 //顯示熱力圖 26 if (_obj.name.indexOf("m1_room_") >= 0 || _obj.name.indexOf("m1_mark_") >= 0) { 27 var buildbub = parseInt(_obj.name.split("_")[2]); 28 var floorNub = 0; 29 if (_obj.name.split("_")[3]) { 30 floorNub = parseInt(_obj.name.split("_")[3]); 31 } 32 //此處獲取熱力圖數據 33 _this.gethitMapData(buildbub, floorNub, function (data) { 34 var postion = _this.hitMapToABPosition["h" + buildbub]; 35 var roomname = "m1_room_" + buildbub + "_" + floorNub; 36 if (floorNub == 0) { 37 roomname = "m1_room_" + buildbub; 38 } 39 var room = w3DShowObj.commonFunc.findObject(roomname); 40 var position = {}; 41 position.x = room.position.x + postion.x; 42 position.y = room.position.y + postion.y+10; 43 position.z = room.position.z + postion.z; 44 var pageposition = indexPage.getMSGPositionToIframe(); 45 var p = new THREE.Vector3(pageposition.x, pageposition.y, -1).unproject(w3DShowObj.camera) 46 _this.addLinkLine(position, p); 47 indexPage.showDetailBtn(); 48 _this.setHeatMap(buildbub, floorNub, data, function (hitmapobj) { 49 hitmapobj.visible = true; 50 indexPage.setbackground(hitmapobj.canvas, buildbub, floorNub); 51 }); 52 }); 53 } else if (_obj.name.indexOf("m1_hitmap_") >= 0){ 54 _obj.visible = false; 55 } 56 } 57 return false; 58 } 59 //切換到模型場景 60 ModelBusiness.prototype.changeToDetailModel = function (suncFunc) { 61 var _this = this; 62 _this.currentShow = "m4"; 63 //閃動 64 var flashnames = ["m1_room_4_1", "m1_room_4_2", "m1_mark_4_1", "m1_mark_4_2"]; 65 w3DShowObj.commonFunc.flashObjsByName(flashnames, "flashFloor", 0x00ffff, 10, 200); 66 //漸變消失 67 setTimeout(function () { 68 var mainmodels = _this.getMainModels(); 69 var showmodels = []; 70 var needVModels = []; 71 $.each(mainmodels, function (_index, _obj) { 72 console.log(flashnames.indexOf(_obj.name)); 73 if (flashnames.indexOf(_obj.name) < 0) { 74 needVModels.push(_obj); 75 } else { 76 showmodels.push(_obj); 77 } 78 }); 79 _this.vModels(needVModels, function () {//虛化主場景其它 80 _this.hideModels(needVModels, function () {//隱藏主場景其它 81 _this.vModels(showmodels, function () {//虛化主場景其它 82 _this.hideModels(showmodels, function () {//隱藏主場景其它 83 w3DShowObj.commonFunc.changeCameraPosition( { x: -1348.8785043951725, y: 3454.620429471695, z: -5559.115429190126 }, { x: -348.1110525967623, y: -733.5693407220991, z: -512.3146780764563 }, 20, function () { 84 var floorModels = _this.getFloorModels("m4_"); 85 86 }); 87 }); 88 }); 89 90 }); 91 }); 92 93 }); 94 }); 95 }, 2000); 96 } 97 98 99 //卻換到主模型場景 100 ModelBusiness.prototype.changeToMainModel = function (suncFunc) { 101 var _this = this; 102 if (_this.currentShow == "mainModel") { return; } 103 //漸變消失 104 this.deleteMarks("m4_mark_"); 105 var mainmodels = _this.getFloorModels("m4_"); 106 var showmodels = []; 107 var needVModels = []; 108 $.each(mainmodels, function (_index, _obj) { 109 needVModels.push(_obj); 110 }); 111 _this.vModels(needVModels, function () {//虛化場景 112 _this.hideModels(needVModels, function () {//隱藏場景 113 w3DShowObj.commonFunc.changeCameraPosition({ x: -922.1363992414555, y: 8950.677755024317, z: 1045.3150882408095 }, { x: -922.1292538636429, y: 170.32798224199792, ainModels(); 114 _this.showModels(_Models, function () { 115 _this.eModels(_Models, function () { 116 if (suncFunc) { 117 suncFunc(); 118 } 119 }); 120 }); 121 }); 122 }); 123 }); 124 125 _this.currentShow = "mainModel"; 126 } 127 128 ModelBusiness.prototype.f1 = null; 129 ModelBusiness.prototype.f2 = null; 130 ModelBusiness.prototype.f0 = null; 131 ModelBusiness.prototype.currentShowFloor = 0; 132 ModelBusiness.prototype.currentShowFloorState = 0; 133 //顯示樓層 134 ModelBuw3DShowObj.commonFunc.findObject("m4_floor_1"); 135 } 136 if (!_this.f2) { 137 _this.f2 = w3DShowObj.commonFunc.findObject("m4_floor_2"); 138 } 139 if (!_this.f0) { 140 _this.f0 = w3DShowObj.commonFunc.findObject("m4_base"); 141 } 142 var floor1 = _this.f1; 143 var floor2 = _this.f2; 144 ; 145 floor2.visible = true; 146 _this.currentShowFloorState = 0; 147 _this.currentShowFloor = 0; 148 setTimeout(function () { 149 _this.showMarks(0,"all"); 150 }, 100); 151 } else if (nub == 1) { 152 if (_this.currentShowFloor == 0) { 153 var oldy = floor2.position.y; 154 var intervalIndex2 = setInterval(function () { floor2.position.y += 100 }, 20); 155 setTimeout(function () { 156 clearInterval(intervalIndex2); 157 floor2.visible = false; 158 floor2.position.y = oldy; 159 _this.currentShowFloor = 1; 160 _this.currentShowFloorState = 0; 161 162 setTimeout(function () { 163 _this.showMarks(1, "all"); 164 }, 100); 165 }, 2000); 166 } else if (_this.currentShowFloor == 2) { 167 floor1.visible = true; 168 floor0.visible = true; 169 var oldy = floor2.position.y; 170 var intervalIndex2 = setInterval(function () { floor2.position.y += 100 }, 20); 171 setTimeout(function () { 172 clearInterval(intervalIndex2); 173 floor2.visible = false; 174 wFloorState = 0; 175 setTimeout(function () { 176 _this.showMarks(1, "all"); 177 }, 100); 178 }, 2000); 179 } else { 180 _this.currentShowFloorState = 0; 181 setTimeout(function () { 182 _this.showMarks(1, "all"); 183 }, 100); 184 } 185 //m4_floor_1 186 } else if (nub == 2) { 187 if (_this.currentShowFloor == 0) { 188 var old1y = floor1.position.y; 189 var old0y = floor0.position.y; 190 var intervalIndex2 = setInterval(function () { floor1.position.y -= 100; floor0.position.y -= 100; }, 20); 191 setTimeout(function () { 192 clearInterval(intervalIndex2); 193 floor1.visible = false; 194 floor1.position.y = old1y; 195 floor0.visible = false; 196 floor0.position.y = old0y; 197 _this.currentShowFloor =2; 198 _this.currentShowFloorState = 0; 199 setTimeout(function () { 200 _this.showMarks(2, "all"); 201 }, 100); 202 }, 2000); 203 } else if (_this.currentShowFloor == 1){ 204 floor2.visible = true; 205 var old1y = floor1.position.y; 206 var old0y = floor0.position.y; 207 var intervalIndex2 = setInterval(function () { floor1.position.y -= 100; floor0.position.y -= 100; }, 20); 208 setTimeout(function () { 209 clearInterval(intervalIndex2); 210 floor1.visible = false; 211 floor1.position.y = old1y; 212 floor0.visible = false; 213 floor0.position.y = old0y; 214 _this.currentShowFloor = 2; 215 _this.currentShowFloorState = 0; 216 setTimeout(function () { 217 _this.showMarks(2, "all"); 218 }, 100); 219 }, 2000); 220 }else { 221 _this.currentShowFloorState = 0; 222 setTimeout(function () { 223 _this.showMarks(2, "all"); 224 }, 100); 225 } 226 } 227 }, 2000); 228 } 229 ModelBusiness.prototype.showMarks = function (floornub, markType) { 230 var _this = this; 231 if (this.markNames && this.markNames.length > 0) { 232 $.each(w3DShowObj.scene.children, function (_index, _obj) { 233 (function (_obj) { 234 if (_this.markNames.indexOf(_obj.name) >= 0) { 235 setTimeout(function () { 236 var modeobj (modeobj); 237 }, 50); 238 } 239 })(_obj); 240 241 }); 242 //$.each(_this.markNames, function (_index, _obj) { 243 // (function (_obj) { 244 // setTimeout(function () { 245 // var modeobj = w3DShowObj.commonFunc.findObject(_obj); 246 // if (modeobj) { 247 // modeobj.visible = false; 248 // } 249 // w3DShowObj.destoryObj(modeobj); 250 // }, 1000 * Math.random()); 251 // })(_obj); 252 //}); 253 } 254 this.markNames = []; 255 var datas1 = this.getMarkData(1); 256 var datas2 = this.getMarkData(2); 257 258 var needfloorData = []; 259 if (floornub == 0) { 260 needfloorData = datas1.concat(datas2); 261 } else if (floornub == 1) { 262 needfloorData = datas1; 263 } else if (floornub == 2) { 264 needfloorData = datas2; 265 } 266 console.log(); 267 var needShowData = []; 268 switch (markType) { 269 case "0": 270 needShowData.push(_obj); 271 } 272 }); 273 break; 274 case "10": 275 $.each(needfloorData, function (_index, _obj) { 276 if (_obj.value == 3 || _obj.value == 4) { 277 _obj.markType = "10"; 278 needShowData.push(_obj); 279 } 280 }); 281 break; 282 case "20": 283 $.each(needfloorData, function (_index, _obj) { 284 if (_obj.value ==5) { 285 _obj.markType = "20"; 286 needShowData.push(_obj); 287 } 288 }); 289 break; 290 case "30": 291 $.each(needfloorData, function (_index, _obj) { 292 if (_obj.value == 6) { 293 _obj.markType = "30"; 294 needShowData.push(_obj); 295 } 296 }); 297 break; 298 case "all": 299 $.each(needfloorData, function (_index, _obj) { 300 if (_obj.value == 0 || _obj.value == 1 || _obj.value == 2) { 301 _obj.markType = "0"; 302 } 303 if (_obj.value == 3 || _obj.value == 4) { 304 _obj.markType = "10"; 305 } 306 if (_obj.value == 5) { 307 _obj.markType = "20"; 308 } 309 if (_obj.value == 6) { 310 _obj.markType = "30"; 311 } 312 needShowData.push(_obj); 313 }); 314 break; 315 } 316 317 $.each(needShowData, function (__index, __obj) { 318 (function (_index, _obj) { 319 setTimeout(function () { 320 _this.addMark 321 }, 1000 * Math.random()); 322 323 })(__index, __obj); 324 }); 325 } 326 //刪除標誌 327 ModelBusiness.prototype.deleteMarks = function (filterStr) {//"m4_mark_" 328 setTimeout(function () { 329 $.each(w3DShowObj.scene.children, function (_index, _obj) { 330 if (_obj && _obj.name && _obj.name.indexOf(filterStr) >= 0) { 331 console.log(_obj.name); 332 if (_obj) { 333 _obj.visible = false; 334 335 w3DShowObj.destoryObj(_obj); 336 } 337 } 338 }); 339 }, 500) 340 } 341 342 ModelBusiness.prototype.getMarkData = function (floornub) { 343 var datas = []; 344 //模擬數據 345 for (i = -1200; i <= 1100; i +=200) { 346 for (j = -2960; j <= 2750; j += 400) { 347 if (j < 1800 || i <400) { 348 datas.push({ 349 x:j, 350 y:floornub == 1 ? -900 : -600, 351 z:i, 352 value: Math.floor(Math.random() * 10 %7) 353 }); 354 } 355 } 356 } 357 return datas; 358 } 359 //顯示人數密度 360 ModelBusiness.prototype.showPNubs = function (nub) {//0 10 20 30 361 this.showMarks(this.currentShowFloor, nub + ""); 362 } 363 //獲取總體模型的全部對象 364 ModelBusiness.prototype.CacheDataMainModels = []; 365 ModelBusiness.prototype.getMainModels = function () { 366 var _this = this; 367 var models = []; 368 if (_this.CacheDataMainModels.length > 0) { 369 models= _this.C ); 370 } 371 }); 372 _this.CacheDataMainModels = models; 373 } 374 return models; 375 } 376 ModelBusiness.prototype.CacheFloorModels = {}; 377 ModelBusiness.prototype.getFloorModels = function (floorName) { 378 var _this = this; 379 var models = []; 380 if (_this.CacheFloorModels[floorName]) { 381 models = _this.CacheFloorModels[floorName]; 382 } else { 383 $.each(w3DShowObj.scene.children, function (_index, _obj) { 384 if (_obj.name.indexOf(floorName) >= 0) { 385 models.push(_obj); 386 } 387 }); 388 _this.CacheFloorModels[floorName] = models; 389 } 390 return models; 391 } 392 ModelBusiness.prototype.intoFloor = function () { 393 } 394 /* 395 ///////通用方法/////////////////////////////////////////////////////////// 396 */ 397 //虛化場景 398 ModelBusiness.prototype.vModels = function (models, sucFunc) { 399 var _this = this; 400 if (models) { 401 w3DShowObj.commonFunc.changeObjsOpacity(models, 1, 0.05, 1000, function () { 402 if (sucFunc) { 403 sucFunc(); 404 } 405 }); 406 } 407 408 } 409 //實體場景 410 ModelBusiness.prototype.eModels = function (models, sucFunc) { 411 var _this = this; 412 if (models) { 413 $.each(models, function (_index, _obj) { 414 _obj.visible = true; 415 }); 416 w3DShowObj.commonFunc.changeObjsOpacity(models, 0.05, 1, 1000, function () { 417 if (sucFunc) { 418 sucFunc(); 419 } 420 }); 421 } 422 } 423 //隱藏模型 424 ModelBusiness.prototype.hideModels = function (models, sucFunc) { 425 setTimeout(function () { 426 $.each(models, function (_index, _obj) { 427 _obj.visible = false; 428 }); 429 if (sucFunc) { 430 sucFunc(); 431 } 432 }, 50); 433 } 434 //顯示模型 435 ModelBusiness.prototype.showModels = function (models, sucFunc) { 436 setTimeout(function () { 437 $.each(models, function (_index, _obj) { 438 _obj.visible = true; 439 }); 440 if (sucFunc) { 441 sucFunc(); 442 } 443 }, 50); 444 } 445 446 //add 447 ModelBusiness.prototype.setHeatMap = function (buildnub, floor, value,suncfunc) { 448 var hitMap = null; 449 if (buildnub == 0) {//場館模型添加熱力圖 450 if (floor = 1) { 451 if (!this.hiteMapObj["m4_hitmap_f" + floor]) { 452 this.createHeatMapModels("m4_hitmap_f" + floor, { x: 0, y: -680, z: 0 },{x:10,y:10,z:1}) 453 } 454 hitMap = this.hiteMapObj["m4_hitmap_f" + floor]; 455 } else { 456 if (!this.hiteMapObj["m4_hitmap_f" + floor]) { 457 this.createHeatMapModels("m4_hitmap_f" + floor, { x: 0, y: -980, z: 0 }, { x: 10, y: 10, z: 1 }) 458 } 459 hitMap = this.hiteMapObj["m4_hitmap_f" + floor]; 460 } 461 } else { 462 var postion = this.hitMapToABPosition["h" + buildnub]; 463 var roomname = "m1_room_" + buildnub + "_" + floor; 464 if (floor == 0) { 465 roomname = "m1_room_" + buildnub ; 466 } 467 if (!this.hiteMapObj["m1_hitmap_b" + buildnub+"_f" + floor]) { 468 this.createHeatMapModels("m1_hitmap_b" + buildnub + "_f" + floor, { x: 0, y: -980, z: 0 }, { x: 2.5, y:2, z: 1 }) 469 } 470 hitMap.rotation.z = postion.ty / 180 * Math.PI; 471 } 472 setTimeout(function () { 473 console.log(value); 474 hitMap.freshData(value); 475 if (suncfunc) { 476 suncfunc(hitMap); 477 } 478 }, 100); 479 480 } 481 //位置對應關係 482 ModelBusiness.prototype.hitMapToABPosition = { 483 h1: { 484 x: -745, 485 y: 5, 486 z: -295, 487 ty: 0 488 }, 489 h2: { 490 x: -745, 491 y: 5, 492 z: 295, 493 ty: 0 494 }, 495 h3: { 496 x: -295, 497 y: 5, 498 z: 745, 499 ty:90 500 }, 501 h4: { 502 x: 295, 503 y:5, 504 z:745, 505 ty:90 506 }, 507 h5: { 508 x: 745, 509 y: 5, 510 z: 295, 511 ty:180 512 }, 513 h6: { 514 x: 745, 515 y: 5, 516 z: -295, 517 ty: -90, 518 ty: 180 519 }, 520 h7: { 521 x: 295, 522 y: 5, 523 z: -745, 524 ty:-90 525 }, 526 h8: { 527 x: -295, 528 y: 5, 529 z: -745, 530 ty: -90 531 } 532 } 533 ModelBusiness.prototype.hiteMapObj = {}; 534 //建立熱力圖 535 ModelBusiness.prototype.createHeatMapModels =function(name,postion,scale) { 536 var modeljson = { 537 show: true, 538 name: name, 539 showSortNub: 10000, 540 id: "", 541 objType: "CloudChart", 542 size: { x: 600, y: 300, z: 0 }, 543 position: postion, 544 scale: scale, 545 rotation: { x: -Math.PI / 2, y: 0, z: 0 }, 546 pictype: "rectangle", //arc圓 rectangle矩形 triangle三角形 547 side: 1, 548 opacity: 1, 549 maxValue: 45, 550 minValue: 0, 551 materialType: "basic", 552 panelColor: 0x00ffff, 553 background: { 554 color: 0xffffff, 555 size: { 556 x: 100, y: 100,//畫布大小 557 r: 50,//圓半徑 558 start: 0, 559 end: 360, 560 angle_r: 10, x1: 0, y1: 0, x2: 100, y2: 100, x3: 100, y3: 0 561 }, 562 imgurl: "", 563 type: "arc", //arc圓 rectangle矩形 triangle三角形 564 border: { 565 color: 0xff0000, 566 width: 1 567 } 568 }, 569 values: [ 570 { 571 value: 10, 572 x: 1, 573 y: 1 574 }, 575 { 576 value: 30, 577 x: 600, 578 y: 300 579 }, 580 ], 581 }; 582 this.hiteMapObj[name] = w3DShowObj.InitAddObject(modeljson); 583 } 584 //獲取熱力圖數據 585 ModelBusiness.prototype.gethitMapData = function (buildnub, floor, sucFunc) { 586 var datas = []; 587 var maxvalue = 0; 588 //模擬數據 589 for (i =40; i <600; i +=40) { 590 for (j = 20; j <300; j += 20) { 591 var value = Math.floor(Math.random() * 40); 592 if (value > maxvalue) { 593 maxvalue = value; 594 } 595 if (i < 500 || j < 200) { 596 datas.push({ 597 x: i, 598 y: j, 599 value: value 600 }); 601 } 602 } 603 } 604 data = { 605 max: 45, 606 data: datas 607 } 608 if (sucFunc) { 609 sucFunc(data); 610 } 611 return data; 612 } 613 614 615 616 ModelBusiness.prototype.markNames = []; 617 //添加標記 618 ModelBusiness.prototype.addMark = function (markName, position, marktype) { 619 var bkimg = ""; 620 var markStr = ""; 621 var markcolor = { r: 255, g: 255, b: 255 }; 622 switch (marktype) { 623 case "0": 624 bkimg = "../../img/3dImg/qp1.png"; 625 markStr = "0-15"; 626 markcolor = { r: 0, g: 0, b: 255, "a": 1 }; 627 break; 628 case "10": 629 bkimg = "../../img/3dImg/qp2.png"; 630 markStr = "10-25"; 631 markcolor = { r: 255, g: 0, b: 0, "a": 1 }; 632 break; 633 case "20": 634 bkimg = "../../img/3dImg/qp3.png"; 635 markStr = "20-35"; 636 markcolor = { r: 0, g: 100, b: 255, "a": 1 }; 637 break; 638 case "30": 639 bkimg = "../../img/3dImg/qp4.png"; 640 markStr = "30-45"; 641 markcolor = { r: 255, g: 255, b: 0, "a": 1 }; 642 break; 643 } 644 var markjson = [{ "name": markName, "objType": "picIdentification", "size": { "x": 160, "y": 160 }, "position": position, "imgurl": bkimg, "showSortNub": 317, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "name": markName + "_nub", "objType": "makeTextSprite", "textColor": markcolor, "message": markStr, "fontsize": 180, "canvasWidth": 250, "canvasHeight": 250, "position": position, "showSortNub": 318, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }]; 645 this.markNames.push(markName); 646 this.markNames.push(markName + "_nub"); 647 w3DShowObj.commonFunc.loadModelsByJsons(markjson, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }); 648 } 649 650 //添加連線 651 ModelBusiness.prototype.addlinesNames = []; 652 653 ModelBusiness.prototype.addLinkLine = function (position, lineEndPosition) { 654 this.removeLinkLine(); 655 var timestrik = new Date().getTime(); 656 var jsons = [{ 657 "show": true, "uuid": "", "name": "m1_splinecurve_1_" + timestrik, "objType": "SplineCurve", "segments": 2, "points": [{ "x": 0, "y": 0, "z": 0 }, { "x": 0, "y": 250, "z": 100 }, { 658 "x": lineEndPosition.x - position.x, "y": lineEndPosition.y - position.y, "z": lineEndPosition.z - position.z 659 }], "style": { "skinColor": 717311 }, "LineStyle": "LinePieces", "position": position, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "showSortNub": 59, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" 660 }, { "show": true, "uuid": "", "name": "m1_cube2_1_" + timestrik, "objType": "cube2", "length": 20, "width": 20, "height": 20, "x": position.x, "y": position.y, "z": position.z, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 717311, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 717311, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 717311, "side": 1, "opacity": 1 }, "skin_behind": { "skinColor": 717311, "side": 1, "opacity": 1 }, "skin_left": { "skinColor": 717311, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 717311, "side": 1, "opacity": 1 } } }, "showSortNub": 57, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_torus_1_" + timestrik, "objType": "torus", "style": { "skinColor": 717311, "opacity": 1 }, "segments": 16, "radialSegments": 2, "arc": 6.283185307179586, "rotation": [{ "direction": "x", "degree": 1.5707963267948963 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "scale": { "x": 1, "y": 1, "z": 1 }, "position": position, "radius": 40, "tuberadius": 5, "showSortNub": 54, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "phiLength": 6.283185307179586, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m1_torus_2_" + timestrik, "objType": "torus", "style": { "skinColor": 717311, "opacity": 1 }, "segments": 16, "radialSegments": 2, "arc": 6.283185307179586, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "scale": { "x": 1, "y": 1, "z": 1 }, "position": position, "radius": 80, "tuberadius": 5, "showSortNub": 54, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "phiLength": 6.283185307179586, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }, { "show": true, "uuid": "", "name": "m3_torus_3_" + timestrik, "objType": "torus", "style": { "skinColor": 717311, "opacity": 0.8 }, "segments": 16, "radialSegments": 2, "arc": 6.283185307179586, "rotation": [{ "direction": "x", "degree": 1.5707963267948966 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "scale": { "x": 1, "y": 1, "z": 1 }, "position": position, "radius": 160, "tuberadius": 5, "showSortNub": 54, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "phiLength": 6.283185307179586, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": "10001", "BindMeteName": "" }]; 661 w3DShowObj.commonFunc.loadModelsByJsons(jsons, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }); 662 this.addlinesNames = ["m1_splinecurve_1_" + timestrik, "m1_cube2_1_" + timestrik, "m1_torus_1_" + timestrik, "m1_torus_2_" + timestrik, "m3_torus_3_" + timestrik]; 663 } 664 665 ModelBusiness.prototype.removeLinkLine = function () { 666 var _this = this; 667 if (this.addlinesNames && this.addlinesNames.length && this.addlinesNames.length > 0) { 668 669 $.each(_this.addlinesNames, function (_index, _obj) { 670 _obj.visible = false; 671 w3DShowObj.destoryObjByName(_obj); 672 }); 673 this.addlinesNames = []; 674 } 675 } 676 //移動事件 677 ModelBusiness.prototype.mouseMoveEvent = function () { 678 console.log("移動事件"); 679 console.log(mousedown); 680 if (mousedown) { 681 console.log("移動事件2"); 682 683 modelBusiness.removeLinkLine(); 684 indexPage.hideDetailBtn(); 685 } 686 } 687 688 //ModelBusiness.prototype. 689 690 var modelBusiness = null; 691 var indexPage = null; 692 function getModelBusinessInstance() { 693 if (modelBusiness == null) { 694 modelBusiness = new ModelBusiness(); 695 modelBusiness.init(); 696 } 697 return modelBusiness; 698 } 699 //兩秒後自動建立對象 700 setTimeout(function () { 701 getModelBusinessInstance() 702 if (parent) { 703 parent.modelBusiness = modelBusiness; 704 parent.w3DShowObj = w3DShowObj; 705 indexPage = parent.indexPage; 706 } 707 }, 2000);
4、接口對接代碼
function ServerAPI() { //websocket接口 this.webSocketUrl = "ws://xxx/monitoring/plaWebSocket"; this.restFulUrl = "xxx"; } ServerAPI.prototype.startServer = function () { var _this = this; startWebsocket(_this.webSocketUrl); } ServerAPI.prototype.getData = function () { } /* * */ //獲取獲取全部場館實時數據 ServerAPI.prototype.getAllRoomData = function (room,suncFunc, failFunc) { var _this = this; var dataurl = _this.restFulUrl + "headMap?room=" + room; httpGet(dataurl, function (rs) { if (rs) { suncFunc(rs.result); } }, function (err) { failFunc(err); }); } //獲取場館的預警值 /* http://118.24.33.58:8080/monitoring/pla/personNumWarn 參數:url?room={0} */ ServerAPI.prototype.getAlarmData = function (room, suncFunc, failFunc) { var _this = this; var dataurl = _this.restFulUrl + "personNumWarn?room=" + room; httpGet(dataurl, function (rs) { if (rs) { suncFunc(rs.result); } }, function (err) { failFunc(err); }); } /** * 歷史人流量數據接口 */ /* 場館來源地統計接口 */ /* 性別比例數據查詢統計接口 */ /* APP排名統計接口 */ ServerAPI.prototype.getAppData = function (room, suncFunc, failFunc) { var _this = this; var dataurl = _this.restFulUrl + "personNumWarn?room=" + room; httpGet(dataurl, function (rs) { if (rs) { suncFunc(rs.result); } }, function (err) { failFunc(err); }); } /** 年齡分佈接口 */ ServerAPI.prototype.getAgesData = function (room, starttime,suncFunc, failFunc) { var _this = this; var dataurl = _this.restFulUrl + "agesStatic?room=" + room + "&startTime=" + starttime; httpGet(dataurl, function (rs) { if (rs) { suncFunc(rs.result); } }, function (err) { failFunc(err); }); } var serverAPI = null;
技術交流郵箱 有不足之處，還望指正：
1203193731@qq.com
交流微信：
其它交流文章
使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模擬，web版3D,bim管理系統——第四課
使用webgl(three.js)搭建一個3D建築，3D消防模擬——第三課
相關文章
- 1. 如何用webgl(three.js)搭建不規則建築模型，客流量熱力圖模擬
- 2. OSGI的建築學模擬
- 3. 用KNIME建立客戶流失模型
- 4. 【TensorFlow2.0】如何搭建網絡模型？
- 5. 3D建模之建築建模工作流程
- 6. 大型建築集團網站搭建模板
- 7. W3C模擬搭建
- 8. 4.1 建築翻模
- 9. 使用webgl(three.js)搭建一個3D建築，3D消防模擬——第三課
- 10. 2020建築電工(建築特殊工種)模擬考試題及建築電工(建築特殊工種)模擬考試系統
- 更多相關文章...
- • DTD - XML 構建模塊 - DTD 教程
- • ASP.NET MVC - 模型 - ASP.NET 教程
- • 委託模式
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
