BasicPlotting 基础标绘

可用于在地图上添加标记、线、填充、文本等各种标绘图形，并支持符号样式的设置。

<mapgis-basic-plotting></mapgis-basic-plotting>

基本用法

API

属性

参数	说明	类型	默认值	版本
plottingItems	标绘功能项列表，存在内置的point、polyline、circle、rectangle、polygon、text标绘功能	PlottingItem[]
symbolStyle	符号样式	object	defaultPlottingSymbolStyle
drawStyle	绘制样式	object	defaultPlottingDrawStyle

方法

名称	描述	版本
getCurrentSelectedLayerId	获取当前选中的图层ID
getPlottingItemsSymbolStyle	获取各标绘功能项的符号样式
clearState	清除标绘状态
clear	清除标绘状态和标绘数据

PlottingItem

/**
 * 标绘功能项
 */
export interface PlottingItem {
  // 唯一标识
  id: string
  // 名称
  label?: string
  // 图标
  icon?: string
  // 符号
  symbol?: object
  // 符号类型
  symbolType?: string[]
  // 几何类型
  geometryType?: string
  // 绘制动作
  action?: Function
}

defaultPlottingSymbolStyle

/**
 * 标绘图形默认的符号样式
 */
export const defaultPlottingSymbolStyle = {
  // 标记，用于点图形
  marker: {
    type: SymbolType.simpleMarker,
    // 颜色
    color: 'rgba(24, 144, 255, 1)',
    // 大小
    size: 10,
    // 轮廓
    outline: {
      // 颜色
      color: 'rgba(255, 255, 255, 1)',
      // 宽度
      width: 1
    }
  },
  // 线，用于线图形
  line: {
    type: SymbolType.simpleLine,
    // 颜色
    color: 'rgba(24, 144, 255, 1)',
    // 宽度
    width: 3
  },
  // 填充，用于圆、矩形和多边形图形
  fill: {
    type: SymbolType.simpleFill,
    // 填充颜色
    color: 'rgba(24, 144, 255, 0.3)',
    // 轮廓
    outline: {
      // 颜色
      color: 'rgba(24, 144, 255, 1)',
      // 宽度
      width: 2
    }
  },
  // 文本，用于文本图形
  text: {
    type: SymbolType.text,
    text: '标注',
    // 字体颜色
    color: 'rgba(24, 144, 255, 1)',
    // 字体样式
    font: {
      // 字体名称，推荐设置黑体、宋体、楷体、微软雅黑、Arial、Calibri、Times New Roman等
      family: '微软雅黑',
      // 字体大小，单位像素
      size: 20,
      // 字体是否为斜体，可选"normal"|"italic"|"oblique"
      style: 'normal',
      // 字体粗细, 可选"normal"|"bold"|"bolder"|"lighter"
      weight: 'normal'
    }
  }
}

defaultPlottingDrawStyle

/**
 * 草图编辑器绘制样式，其他样式由标绘样式决定
 */
export const defaultPlottingDrawStyle = {
  // 顶点样式
  vertexStyle: {
    type: 'simpleMarker',
    // 颜色
    color: 'rgba(24, 144, 255, 1)',
    // 大小
    size: 10,
    // 轮廓
    outline: {
      // 颜色
      color: 'rgba(255, 255, 255, 1)',
      // 宽度
      width: 1
    }
  },
  // 捕捉选项
  snapOption: {
    //是否自动捕捉顶点重合
    isSnapVertexCoincident: false,
    // 是否自动捕捉线上的点
    isSnapVertexInLine: false,
    // 是否自动捕捉平行线
    isSnapParallel: false,
    // 是否自动捕捉垂线垂点
    isSnapPerpendicular: false,
    // 是否捕捉正在绘制的图形的边界
    snapSketchGeometry: false
  }
}