slble-attend/sl.ble_sys-attend/src-js/components/MapEditor/drawExFunc.js

import * as maptalks from 'maptalks'
// import colorString from 'color-string'
import { PathUwbDev, PathCamera } from './symbolSvg'
import Color from 'color'

/**
 * @method DrawEx
 * @param mapEngine
 * @param coordinate
 * @param symbol
 * @param drawMode
 * @constructor
 */
function DrawEx(mapEngine, coordinate, symbol, drawMode) {
  switch (drawMode.toLowerCase()) {
    case 'anchor':
      drawAnchor(mapEngine, coordinate, symbol)
      break
    case 'camera':
      drawCamera(mapEngine, coordinate, symbol)
      break
    case 'textbox':
      drawText(mapEngine, coordinate, symbol)
      break
    case 'label':
      drawLabel(mapEngine, coordinate, symbol)
      break
    case 'dylabel':
      drawDylabel(mapEngine, coordinate, symbol)
      break
  }
}

function drawAnchor(mapEngine, coordinate, symbol, addr, buildingId, floorId) {
  if (!symbol) symbol = {}
  if (!addr) addr = 0
  if (!buildingId) buildingId = 0
  if (!floorId) floorId = 0
  const geo = new maptalks.Marker(
    coordinate,
    {
      'symbol': {
        'markerType': 'path',
        'markerPath': PathUwbDev,
        'markerPathWidth': 1024,
        'markerPathHeight': 1024,
        'markerFill': '#0000ff', // will override tiger path's style properties
        // 'markerLineColor' : 12,
        'markerWidth': 32,
        'markerHeight': 32,
        'markerDy': 16,
        'markerDx': 0,
        'textName': '{jobId}\nA{addr}',
        'textDy': -35
      },
      'properties': {
        'type': 'anchor',
        'defaultFill': '#0000ff',
        'selectFill': '#FF0000',
        'altitude': symbol.altitude,
        'addr': addr,
        'buildingId': buildingId,
        'floorId': floorId
      }
    }
  )
  Math.random()
  if (!geo.getId()) {
    const id = 'Anchor' + Math.floor(Math.random() * 10000)
    geo.setId(id)
    geo.isLock = false
  }
  mapEngine.selLaycon.addGeometry(geo)
}

function drawCamera(mapEngine, coordinate, symbol, addr) {
  if (!symbol) symbol = {}
  if (!addr) addr = 0
  const geo = new maptalks.Marker(
    coordinate,
    {
      'symbol': {
        'markerType': 'path',
        'markerPath': PathCamera,
        'markerPathWidth': 1024,
        'markerPathHeight': 1024,
        'markerFill': '#0000ff', // will override tiger path's style properties
        // 'markerLineColor' : 12,
        'markerWidth': 32,
        'markerHeight': 32,
        'markerDy': 0,
        'markerDx': 0,
        'textName': '{jobId}\nA{addr}',
        'textDy': 12
      },
      'properties': {
        'altitude': symbol.altitude,
        'addr': addr,
        'type': 'camera'
      }
    }
  )
  Math.random()
  if (!geo.getId()) {
    const id = 'Camera' + Math.floor(Math.random() * 10000)
    geo.setId(id)
    geo.isLock = false
  }
  mapEngine.selLaycon.addGeometry(geo)
}

function drawDylabel(mapEngine, coordinate, symbol) {
  if (!symbol) symbol = {}
  //const c = new Color(symbol.fillColor)
  const geo = new maptalks.Label('{val}' /* content */, coordinate, /* coordinate */
    {
      'draggable': true,
      'editable': false,
      'boxStyle': {
        'padding': [12, 8],
        'verticalAlignment': 'top',
        'horizontalAlignment': 'left',
        'minWidth': symbol.boxWidth,
        'minHeight': symbol.boxHeight,
        'symbol': {
          'markerType': 'square',
          'markerFill': symbol.fillColor,
          'markerFillOpacity': 0,
          'markerLineColor': symbol.lineColor,
          'markerLineWidth': 0
        }
      },
      'textSymbol': {
        'textFaceName': 'monospace',
        'textFill': symbol.textFill,
        'textHaloFill': symbol.textHaloFill,
        'textHaloRadius': symbol.textHaloRadius,
        'textSize': symbol.textSize,
        'textWeight': 'bold',
        'textVerticalAlignment': 'top'
      },
      'properties': {
        'val': 'XXXX.XX',
        'altitude': symbol.altitude,
        'action': '',
        'type': 'dylabel'
      }
    })
  Math.random()
  if (!geo.getId()) {
    const id = 'Dylabel' + Math.floor(Math.random() * 10000)
    geo.setId(id)
    geo.isLock = false
  }
  mapEngine.selLaycon.addGeometry(geo)
}

function drawLabel(mapEngine, coordinate, symbol) {
  if (!symbol) symbol = {}
  const c = new Color(symbol.fillColor)
  const geo = new maptalks.Label('编辑文本' /* content */, coordinate, /* coordinate */
    {
      'draggable': true,
      'boxStyle': {
        'padding': [12, 8],
        'verticalAlignment': 'top',
        'horizontalAlignment': 'left',
        'minWidth': symbol.boxWidth,
        'minHeight': symbol.boxHeight,
        'symbol': {
          'markerType': 'square',
          'markerFill': symbol.fillColor,
          'markerFillOpacity': c.alpha(),
          'markerLineColor': symbol.lineColor,
          'markerLineWidth': symbol.lineWidth
        }
      },
      'textSymbol': {
        'textFaceName': 'monospace',
        'textFill': symbol.textFill,
        'textHaloFill': symbol.textHaloFill,
        'textHaloRadius': symbol.textHaloRadius,
        'textSize': symbol.textSize,
        'textWeight': 'bold',
        'textVerticalAlignment': 'top'
      },
      'properties': {
        'altitude': symbol.altitude,
        'action': ''
      }
    })
  Math.random()
  if (!geo.getId()) {
    const id = 'Label' + Math.floor(Math.random() * 10000)
    geo.setId(id)
    geo.isLock = false
  }
  mapEngine.selLaycon.addGeometry(geo)
}

function drawText(mapEngine, coordinate, symbol) {
  if (!symbol) symbol = {}
  const c = new Color(symbol.fillColor)
  const geo = new maptalks.TextBox('文本框' /* content */, coordinate, /* coordinate */
    symbol.boxWidth /* width */, symbol.boxHeight /* height */,
    {
      'draggable': true,
      'textStyle': {
        'wrap': true, // auto wrap text
        'padding': [12, 8], // padding of textbox
        'verticalAlignment': 'top',
        'horizontalAlignment': 'left',
        'symbol': {
          'textFaceName': 'monospace',
          'textFill': symbol.textFill,
          'textHaloFill': symbol.textHaloFill,
          'textHaloRadius': symbol.textHaloRadius,
          'textSize': symbol.textSize,
          'textWeight': 'bold'
        }
      },
      'boxSymbol': {
        // box's symbol
        'markerType': 'square',
        'markerFill': symbol.fillColor,
        'markerFillOpacity': c.alpha(),
        'markerLineColor': symbol.lineColor,
        'markerLineWidth': symbol.lineWidth
      },
      properties: {
        'altitude': symbol.altitude,
        'action': ''
      }
    })
  Math.random()
  if (!geo.getId()) {
    const id = 'Text' + Math.floor(Math.random() * 10000)
    geo.setId(id)
    geo.isLock = false
  }
  mapEngine.selLaycon.addGeometry(geo)
}

function pointInPolygon(polygon, pt) {
  let oddNodes = false
  let j = polygon.length - 1

  for (let i = 0; i < polygon.length; i++) {
    if ((polygon[i].y < pt.y && polygon[j].y >= pt.y ||
      polygon[j].y < pt.y && polygon[i].y >= pt.y) &&
    (polygon[i].x <= pt.x || polygon[j].x <= pt.x)) {
      if (polygon[i].x + (pt.y - polygon[i].y) / (polygon[j].y - polygon[i].y) * (polygon[j].x - polygon[i].x) < pt.x) {
        oddNodes = !oddNodes
      }
    }
    j = i
  }
  return oddNodes
}

function nearPoints(polygon, pt) {
  let idx = -1
  let minDis = -1
  for (let i = 0; i < polygon.length; i++) {
    const p = polygon[i]
    const dis = (p.x - pt.x) * (p.x - pt.x) + (p.y - pt.y) * (p.y - pt.y)
    if (dis < minDis || minDis < 0) {
      minDis = dis
      idx = i
    }
  }

  const vec = []
  vec.push(polygon[(idx - 1 + polygon.length) % polygon.length])
  vec.push(polygon[(idx + polygon.length) % polygon.length])
  vec.push(polygon[(idx + 1 + polygon.length) % polygon.length])

  return vec
}

function getLineFunc(pt1, pt2) {
  const a = pt2.y - pt1.y
  const b = pt1.x - pt2.x
  const c = pt1.y * (pt2.x - pt1.x) - pt1.x * (pt2.y - pt1.y)
  return { a: a, b: b, c: c }
}

function getDisToLine(a, b, c, pt) {
  return Math.abs(a * pt.x + b * pt.y + c) / Math.sqrt(a * a + c * c)
}

function getCrossPtInOrth(a, b, c, pt) {
  const d = a * pt.y - b * pt.x
  const xd = -(b * d + a * c) / (b * b + a * a)
  let yd = 0
  if (Math.abs(b) < 0.000001) {
    yd = pt.y
  } else {
    yd = -(a * xd + c) / b
  }

  return { x: xd, y: yd }
}

function getCrossPtInOrthByPts(pt1, pt2, pts) {
  const { a, b, c } = getLineFunc(pt1, pt2)
  return getCrossPtInOrth(a, b, c, pts)
}

export {
  DrawEx,
  pointInPolygon,
  nearPoints,
  getLineFunc,
  getDisToLine,
  getCrossPtInOrth,
  getCrossPtInOrthByPts
}