地图编辑

Map JSON

Feature

地图中的每个工位，多边形，或标记都是一个Feature. Feature和GeoJSON兼容。

tsx

const feature: Feature = {
          type: 'Feature',
          properties: {
            typeID: ShapeIDs.,
            FID: nanoid(),
            shape: 'Point' | 'Rectangle' | 'Polygon' | 'LineString',
            width: iconSize.width,
            height: iconSize.height,
          },
          geometry: {
            type: 'Point',
            coordinates: [e.latlng.lat, e.latlng.lng],
          },
        }

Property	说明
type	只能是'Feature'
properties.typeID	ShapeID, 指定的图形
properties.FID	nanoid, 唯一的ID,也就是resource关联的map_id
properties.shape	DrawShapeEnum, point或rectangle, polygon,
properties.width	icon的宽度
properties.height	icon的高度
geometry.type	'Point'，'Polygon', 'LineString', 'Rectangle'
geometry.coordinates	图形坐标

geometry用于leaflet画图。properties是我们的扩展字段，用于描述和关联。

TypeID

feature.properties.typeID用于标识具体代表的业务类型，例如Desk, Room, POI, Assets.

Shape

feature.properties.shape是为了扩展几何图形。它和feature.geometry.type基本相同，目前唯一的不同是shape包括Rectangle, 而feature.geometry.type因为要和GeoJSON兼容，不包括Rectangle.

Rectangle是特殊的Polygon,所以feature可以是

{
  properties: {
    shape: 'Rectangle'
  }
  geometry: {
    type: 'Polygon'
  }
}

而其他情况下两者应该一致，或shape为空，即用type判断

KBFloorMap

只读形式下的FloorMap。用于用户侧首页显示地图，或弹框显示地图位置。

/view/目录下的组件用于显示地图图形，包括DeskMarker和Polygon两种。Rectangle也用Polygon显示。因为不用编辑。两者的操作和表现是相同的。

KBEditFloorMap

FloorMap编辑器。

/edit目录下包括编辑的组件。

DrawingDeskMarker, DrawingSvgMarker, DrawingShape用于画图模式，主要是显示画图过程中的形状，不实际在地图中。
EditableDeskMarker, EditableRectangle, EditablePolygon用于编辑模式。

MapState

编辑地图的状态使用jotai，在mapState.ts中定义。关于地图的所有操作，都会保存在editMapStateAtom.这个atom目前包括两类数据：

Resources: 记录资源和地图的关联状态
MapInfo: 记录地图本身的形状位置

所以关联相关的操作都只会涉及到mapResourcesAtom. 而地图操作都只会涉及到mapInfoAtom.

我们采用immer修改atom的状态。

编辑操作

编辑操作主要使用了leaflet-geoman组件，提供编辑(edit)，旋转(rotate)，移动(drag)

样式设置

样式通过shapeStyle控制。marker和polyon的样式分别封装在getDeskBackground和getRoomBackground的方法中，定义了hover，select, link和通常状态下的颜色及marker形状。可以在相应的函数中对照修改。

地图编辑 ​

Map JSON ​

Feature ​

TypeID ​

Shape ​

KBFloorMap ​

KBEditFloorMap ​

MapState ​

编辑操作 ​

样式设置 ​