解析DXF,通过three.js显示2D图;将传过来坐标显示在2D图上。
在网页中,显示区域内 人的移动轨迹:
- 区域以CAD图展示,导出的文件为 dxf文件
- 请求 dxf文件,并解析为 three.js 可识别的 JS对象
- 通过 three.js 将区域以 2D图 的形式展现在网页上
- 通过 WebSocket 不断获取人的坐标,在2D图上将坐标标记出来,看起来就是移动的标记
- 显示所有人的位置标签,并不断更新坐标
- 预定义一组颜色,按顺序每人一种位置标签颜色
- 开启以及停止WebSocket,即开始及暂停更新位置标签
- 当人第一次出现或离开时,想服务器请求 ID到人名的映射表
- 缩放功能:TODO
- 定位某个人的轨迹(场景随着人的移动而移动):TODO
- 给指定的人的位置标签设置颜色:TODO
<!--
data-font-url
three.js用到的中文字体(微软雅黑粗体)json文件的URL
data-dxf-file-url
获取dxf文件的URL
data-id-to-name-mapping-url
获取id到name的映射表。
后台返回的数据:(参考:JsonResult.java)
{
"success": Boolean,
"data": {
"56789": "张三",
"56799": "李四",
...
}
}
data-websocket-url
WebSocket 的 URL
-->
<div class="pku-area-map"
id="areaMap"
style="display: none;"
data-font-url="./fonts/MicrosoftYaHei_Bold.json"
data-dxf-file-url="./data/zhian-0719-21_LAYER_1.dxf"
data-id-to-name-mapping-url="./data/idToNameMapping.json"
data-websocket-url="ws://192.168.1.241:8080/LocalSense/localsense">