可视化搭建平台的地图组件和日历组件方案选型

 
 
 
 

  
  
  
  
import React, { useState, memo, useEffect, useRef } from 'react'; 
  
  
  
  
import { Calendar } from 'zarm'; 
  
  
  
  
import styles from './index.less'; 
  
  
  
  
import { ICalendarConfig } from './schema'; 
  
  
  
  
 
  
  
  
  
const CalendarCp = memo((props: ICalendarConfig & { isTpl: boolean }) => { 
  
  
  
  
  const { time, range, color, selectedColor, round, isTpl } = props; 
  
  
  
  
  // ... 
  
  
  
  
  return ( 
  
  
  
  
     
  
  
  
  
      
  
  
  
  
        multiple={!!range} 
  
  
  
  
        value={value} 
  
  
  
  
        min={min} 
  
  
  
  
        max={new Date(max)} 
  
  
  
  
        disabledDate={(date:any) => /(0|6)/.test(date.getDay())} 
  
  
  
  
        onChange={(value:Date[] | undefined) => { 
  
  
  
  
          setValue(value); 
  
  
  
  
        }} 
  
  
  
  
      /> 
  
  
  
  
    

 这是一个dooring组件的基本雏形, 其次我们看看 schema 部分. 这一部分主要包含了组件的shape的类型定义和基本的可编辑属性(editable), 如下:

 
 
 
 

  
  
  
  
export type TCalendarEditData = Array; 
  
  
  
  
export interface ICalendarConfig { 
  
  
  
  
  time: TTextDefaultType; 
  
  
  
  
  range: TTextDefaultType; 
  
  
  
  
  color: TTextDefaultType; 
  
  
  
  
  selectedColor: TTextDefaultType; 
  
  
  
  
  round: TNumberDefaultType; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
export interface ICalendarSchema { 
  
  
  
  
  editData: TCalendarEditData; 
  
  
  
  
  config: ICalendarConfig; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
const Calendar: ICalendarSchema = { 
  
  
  
  
  editData: [ 
  
  
  
  
    { 
  
  
  
  
      key: 'time', 
  
  
  
  
      name: '日历时间', 
  
  
  
  
      type: 'Text', 
  
  
  
  
      placeholder: '格式如2020-01或2020-11' 
  
  
  
  
    }, 
  
  
  
  
    { 
  
  
  
  
      key: 'range', 
  
  
  
  
      name: '日历选中范围', 
  
  
  
  
      type: 'Text', 
  
  
  
  
      placeholder: '格式如01-12(几号到几号)' 
  
  
  
  
    }, 
  
  
  
  
    { 
  
  
  
  
      key: 'color', 
  
  
  
  
      name: '文本颜色', 
  
  
  
  
      type: 'Color' 
  
  
  
  
    }, 
  
  
  
  
    { 
  
  
  
  
      key: 'selectedColor', 
  
  
  
  
      name: '选中颜色', 
  
  
  
  
      type: 'Color' 
  
  
  
  
    }, 
  
  
  
  
    { 
  
  
  
  
      key: 'round', 
  
  
  
  
      name: '圆角', 
  
  
  
  
      type: 'Number' 
  
  
  
  
    }, 
  
  
  
  
  ], 
  
  
  
  
  config: { 
  
  
  
  
    time: '2020-12', 
  
  
  
  
    range: '05-08', 
  
  
  
  
    color: 'rgba(0,0,0,1)', 
  
  
  
  
    selectedColor: 'rgba(22,40,212,1)', 
  
  
  
  
    round: 0 
  
  
  
  
  }, 
  
  
  
  
}; 
  
  
  
  
 
  
  
  
  
export default Calendar; 
 
 
 
 

如果我们想增加属性, 我们只需要在这个文件里添加对应的属性和类型即可.

template主要是定义了组件的分区和初始高度, 代码如下:

 
 
 
 

  
  
  
  
const template = { 
  
  
  
  
  type: 'Calendar', 
  
  
  
  
  h: 185, 
  
  
  
  
  displayName: '日历组件', 
  
  
  
  
}; 
  
  
  
  
export default template; 
 
 
 
 

有了以上三个部分, 我们要可以渲染出一个在画布中可拖拽, 可编辑的组件了. 当然这块还需要FormRender的帮助, 这块笔者后期会介绍.

以上基本就实现了一个可拖拽可配置的日历组件, 我们接下来继续看看地图组件.

开发地图组件

有了以上的组件开发经验之后我们开发地图组件就非常方便了. 地图组件我们这里使用了@uiw/react-baidu-map, 也就是百度地图的React版本, 大家也可以使用高德地图.因为地图组件react-baidu-map 需要提前阅读对应的文档, 这里笔者就不一一介绍了, 我们直接来看如何实现.同样我们也需要定义好地图对外暴露的props, 笔者这里简单定义几个可配置的属性:

• ak 百度地图使用凭证, 建议大家在生产环境替换成自己的
• location 地点的经纬度, 方便快速定位
• position 地点的地名, 我们可以自定义设置

如下图:

基本的代码实现如下:

 
 
 
 

  
  
  
  
import React, { memo } from 'react'; 
  
  
  
  
import { Map, Marker, Label, APILoader } from '@uiw/react-baidu-map'; 
  
  
  
  
import styles from './index.less'; 
  
  
  
  
import { IMapConfig } from './schema'; 
  
  
  
  
 
  
  
  
  
const Mapcomponent = memo((props: IMapConfig) => { 
  
  
  
  
  const { ak, location, position } = props; 
  
  
  
  
  return ( 
  
  
  
  
         
  
  
  
  
           
  
  
  
  
             
  
  
  
  
               
  
  
  
  
              
  
  
  
  
                content={location}  
  
  
  
  
                position={{ lng: position[0], lat: position[1] }}  
  
  
  
  
                style={{color: '#000', borderColor: '#06c', padding: '3px 10px', borderRadius: '6px'}}  
  
  
  
  
              />