室内地图制作方法

项目源代码
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+/