室内地图制作方法
项目源代码
https://gitee.com/vpclub-wh/indoor-map
室内地图制作
用threejs实现的室内地图展示，原理非常简单
- 使用正交相机创建2D效果
- 根据地图数据多边形形状
- 使用OrbitControls进行地图控制
所有的代码都在src/components/indoor-map.vue 中
制作地图形状数据
要实现平面地图倒是很简单，绘制多边形形状与标记，以便于数据绑定，则需要借助一些外部工具，因此，我们使用Tiled mapeditor 制作地图形状与标记
Tiled下载：https://www.mapeditor.org/
最终效果图
约定
首先，我们约定一张地图有四个图层，需要在图层中定义
- 背景图：bg，类型为图像层,图片的长和宽要求是2的整数倍
- 地板或者公共空间:floor，类型为对象层
- 房间:rooms，类型为对象层
- 文本标记:label，类型为对象层
进行区块标记
约定
- 所有的对象均使用多边形，既使用矩形绘制的区块，也需要转换为多边形，可以在对象上右键，转换为多边形
- 为便于协作，对象的name属性作为与数据绑定的唯一依赖关系
- 因为文字内容需要动态变化，而文字的长和宽需要计算，因此label使用点位置进行标记，再动态计算放到与此坐标点的居中位置
- 导出格式为json
tiledmap快捷键
- 放大：ctrl++
- 缩小：ctrl+-
- 默认大小：ctrl+0
- 平移：滚轮或者按住空格
- 填充到窗口正中间：ctrl+/