@gbeata/mapping NPM

✨MapStage 组件文档

size: {width: number, width: number}
boundary: 地图边界传值: minX, maxY, maxX, maxY, maxX, minY, minX, minY, minX, maxY, , 不传的话会遍历所有的点得出边界值
boundaryVisible: 是否显示地图边界
boundaryProps: React-konva中的LineProps,除了points其他都可以传,默认为黑色虚线
defaultMapCenter: { x: number, y: number } 初始化定位视图聚焦的中心点,如果不传则定位到边界的中心点，要配合ratio计算
baseMap: 底图的点位 => x1,y1,x2,y2,x3,y3,x4,x5,y5
baseMapProps: React-konva中的LineProps,不传默认为一个闭合的图形
points: []
- id // 手动去重,防止报错
- types // 判断点类型
- x: number
- y: number
- state: number // 判断状态
pointProps: React-konva中的RectProps
pointsValue:[]
onPointsSelect: (points: IPoint[]) => void
multiCheckedPoints: (points: IPoint[]) => void // 什么时候清除呢
clearCheckedPoints: () => void
lines: []
- id
- points
lineProps: React-konva中的LineProps
vehicles: []
- id
- x
- y
- name
- battery
- state
followVehicleView: undefined| false | vehicleId , 是否要锁定小车视角，每次只能一辆车,锁定后视图跟随小车移动
blocks: [ {points: x1,y1,x2,y2,x3,y3,x4,y4, title:string, props: LineProps} ] 可以生成区块
onStageClick: (position: {x: number, y: number})=>void 点击stage的任意位置,这个应该没什么用
minRatio: 最小缩放的比例: 表现为100px的屏幕像素代表实际是多少mm
maxRatio: 最小缩放的比例: 同上; 两个都不设置则为无限视距
onRatioChange: (ratio)=> void 比例改变的时候, 自己去控制线段是否显示,也可以自己根据其他东西去显示
scaleBy: 每次缩放的速度，在pc上就是滚轮滚动的速度
linesVisible: 线段是否要显示
storagePointsVisible: 是否显示库位
commonPointsVisible: 点位和名字是否显示
linesDirectionVisible: 线段方向是否显示
mergeLines: 线段是否合并,不需要显示线段的id的时候可以用这个，可以保持图形不变的情况下减少线段的数量