介绍

customize-parking-map 自定义地图-编辑器

• 插件共分为两部分【customize-parking-map】**自定义地图-编辑器 **和【customize-parking-map-analysis】**自定义地图-解析器，**顾名思义前者为编辑，后者将编辑后的数据进行解析。
• 为什么分为两部分，两个插件？因为编辑器是涉及编辑画布等操作，插件包过大。解析器可用于web，mp-weixin,mp-alipay等不同平环境，因小程序对于包有大小限制，所以解析器的插件包很小，远小于编辑器。
• 本项目初衷用于绘制停车场相关地图，可以是道路路边车位，也可以是商业车场，用于同步展示泊位是否占用，泊位位置等信息

使用

引用编辑器插件【本项目插件】

npm i customize-parking-map

引用解析器插件

npm i customize-parking-map-analysis

注：编辑器插件与解析器插件的版本必须配套使用，否则可能出现无法解析或解析异常等不可知问题

数据结构

注意: 该结构仅代表当前版本，解析时请注意解析器版本是否冲突

共有五类控件，分别为：【线面多边形】【圆形】【文字】【图片】【泊位】

{
    id:'1', //自动生成
    name: '',
    type: 1, // 虚线、实线、填充
    position: [[0, 199, 0], [400, 199, 0]], // x,y,圆角半径
    isStroke: true, // 是否描边
    isClose: true, // 是否闭合路径
    color: "#FFF", // 描边线条颜色
    lineHeight: 2, // 描边线条高度
    lineType: 1, // 描边线条类型 1实线 2虚线
    dashedLine: [20, 20], // 描边虚线间隔 x白色宽度 y空格宽度（只有虚线lineType=2时会生效）
    isFill: false, // 是否填充
    background: "#F00", // 填充颜色
    angle: 0, // 旋转角度（不需要角度，可通过折点坐标实现转向）
    realPosition: [[0, 0], [100, 100]] // 区间坐标位置
}

• 线面多边形现有预设：
  • 多边形预设：
        直行、左转弯、右转弯、直行左转、直行右转、左调头、左右转弯
        正方形、矩形、正三角形、正五边形、正六边形、正五角星、正六角星
  • 直线虚线预设：
        直线、虚线、斑马线

{
    id:2,
    name: '圆形',
    type: 2, // 圆形
    position: [20, 20], // 圆心x,y
    radius: 20, // 半径
    sAngle: 0, // 开始角度
    eAngle: 360, // 结束角度
    color: "#FFF", // 描边颜色
    background: "#000", // 背景颜色
    lineHeight: 2, // 线条高度
    angle: 0, // 旋转角度
    realPosition: [[0, 0], [40, 40]] // 区间坐标位置
}

{
    id:3,
    name: '',
    type: 3, // 文字
    position: [100, 100], // x,y
    text: "这是一行文字", // 文字内容
    fontcolor: "#000", // 文字颜色
    fontStroke: "#FFF", // 文字描边颜色
    fontsize: 20, // 文字大小
    angle: 0, // 旋转角度
    realPosition: [[0, 0], [90, 30]] // 区间坐标位置
}

{
    id:4,
    name: '',
    type: 4, // 图片
    position: [0, 0, 100, 100], // x,y,盒子宽,盒子高
    imgId: '', // 图片id
    isStretch: false, // 是否拉伸
    width: 0, // 图片真实宽度
    height: 0, // 图片真实高度
    scaleFactor: 1, // 缩放倍数
    color: "#FFF", // 背景颜色
    radius: [0, 0, 0, 0], // 图片四个角的圆角半径
    angle: 0, // 旋转角度
    realPosition: [[0, 0], [100, 100]] // 区间坐标位置
}

由于涉及多端解析，图片可能涉及跨域等问题，暂时只能从预设中进行选择

• 预设： 砖路、指北针、行道树、灌木丛、车子

{
    id:5,
    name: '',
    type: 5, // 停车位
    position: [0, 50, 50, 30], // x,y,宽，高
    angle: 0, // 整体 旋转角度
    // direction: 4,
    isHaveCar: true, // 是否有车泊车
    berthNumber: "100001", // 泊位号
    fontsize: 12, // 泊位号文字大小
    fontcolor: "#55aaff", // 泊位号文字颜色
    fontStroke: "#FFF", // 文字描边颜色
    fontPosition: [0, 0], // 文字位置
    fontAngle: 0, // 文字旋转角度
    realPosition: [[0, 50], [50, 80]] // 区间坐标位置
}

{
    "width": 1000, // 画布宽
    "height": 400, // 画布高
    "color": "#4A4A4A", // 画布背景色
    "list": [
        // 控件数据
    ]
}