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

/* *********************************************************** */
// Created by Macheng on 2019/07/31.
// Description:
// This is a class of map engine.
// Ver 1.0 save marker path by each copy, this will cost more space.
/* *********************************************************** */

import * as maptalks from 'maptalks'
import { ThreeLayer } from 'maptalks.three'
import * as THREE from 'three'
import { HeatLayer } from 'maptalks.heatmap'
import { ClusterLayer } from './MyClusterLayer'

class Laycon {
  _mapEng = null
  name = ''
  title = ''
  layer = null
  type = 'vector'
  enableAltitude = false
  imgUrl = ''
  hideInEdit = false

  constructor(opts, mapEng = null, layer = null) {
    if (!opts) opts = {}
    this.init(opts, mapEng, layer)
  }

  addGeometry(geo) {
    if (this.layer) {
      this.layer.addGeometry(geo)
    }
    return this
  }

  addToMapEng(mapEng) {
    if (mapEng) {
      this._mapEng = mapEng
      this.layer.remove()
      this._mapEng.addLaycon(this)
    }
    return this
  }

  clear() {
    if (this.layer) {
      this.layer.clear()
    }
  }

  init(opts, mapEng = null, layer = null) {
    this.name = opts.name || this.name
    this.title = opts.title || this.title
    for (const v of LAYER_DEFINES) {
      if (v.name === this.name) {
        this.enableAltitude = v.enableAltitude
      }
    }
    this.type = opts.type || this.type
    this.imgUrl = opts.imgUrl || this.imgUrl
    this.hideInEdit = opts.hideInEdit || this.hideInEdit

    if (this.layer) {
      this.layer.remove()
      this.layer = null
    }
    if (layer) {
      this.layer = layer
      this.layer.config('enableAltitude', this.enableAltitude)
    } else {
      switch (this.type) {
        case 'vector':
          this.layer = new maptalks.VectorLayer(this.name, [], {
            enableAltitude: this.enableAltitude
          })
          break
        case 'vec3d':
          this.layer = new ThreeLayer(this.name, {
            forceRenderOnMoving: true,
            forceRenderOnRotating: true,
            enableAltitude: true
          })
          this.layer.prepareToDraw = function(gl, scene, camera) {
            const light = new THREE.PointLight(0xffffff)
            // const light = new THREE.DirectionalLight(0xffffff);
            // light.position.set(0, 0, 60).normalize();
            //light.position.set(0, -10, 30).normalize();
            camera.add(light)
          }
          break
        case 'image':
          this.layer = new maptalks.ImageLayer(this.name,
            [
              {
                url: this.imgUrl,
                extent: [-10000, -10000, 10000, 10000],
                opacity: 1
              }
            ], {
              forceRenderOnMoving: true,
              forceRenderOnZooming: true,
              forceRenderOnRotating: true
            })
          break
        case 'heat':
          this.layer = new HeatLayer(this.name)
          break
        case 'cluster':
          const option = {
            'noClusterWithOneMarker': true,
            'maxClusterZoom': 21,
            //"count" is an internal variable: marker count in the cluster.
            'symbol': {
              'markerType': 'ellipse',
              'markerFill': { property: 'count', type: 'interval', stops: [[0, '#1bbc9b'], [9, '#1bbc9b'], [99, '#1bbc9b']] },
              'markerFillOpacity': 0.7,
              'markerLineOpacity': 1,
              'markerLineWidth': 3,
              'markerLineColor': '#fff',
              'markerWidth': { property: 'count', type: 'interval', stops: [[0, 40], [9, 60], [99, 80]] },
              'markerHeight': { property: 'count', type: 'interval', stops: [[0, 40], [9, 60], [99, 80]] }
            },
            'drawClusterText': true,
            'geometryEvents': true,
            'single': true
          }
          if (this.name == 'tag') {
            option.symbol.markerType = 'square'
            option.symbol.markerFill = { property: 'count', type: 'interval', stops: [[0, '#1bbcff'], [9, '#1bbcff'], [99, '#1bbcff']] }
          }
          this.layer = new ClusterLayer(this.name, [], option)
          this.layer.on('compute-grid', () => {
            if (this.mapEng.cbOnClusterChange) {
              this.mapEng.cbOnClusterChange()
            }
          })
          break
      }
    }

    if (mapEng) {
      this.addToMapEng(mapEng)
    }

    return this
  }

  getAltas() {
    if (this.layer) {
      return this.layer.getMap()
    }
    return null
  }

  getCamera() {
    if (this.layer) {
      return this.layer.getCamera()
    }
    return null
  }

  getGeometries() {
    if (this.layer) {
      return this.layer.getGeometries()
    }
    return []
  }

  getId() {
    return this.name
  }

  getScene() {
    if (this.layer) {
      return this.layer.getScene()
    }
    return null
  }

  hide() {
    if (this.layer) {
      this.layer.hide()
    }
    return this
  }

  isVisible() {
    if (this.layer) {
      return this.layer.isVisible()
    }
    return false
  }

  remove() {
    if (this.layer) {
      this.layer.remove()
      if (this._mapEng) {
        this._mapEng.removeLaycon(this.name)
        this._mapEng = null
      }
    }
    return this
  }

  show() {
    if (this.layer) {
      this.layer.show()
    }
    return this
  }
}

const LAYER_ID_DEFS = {
  'IdBg': 0,
  'IdBorder': 1,
  'IdWall': 2,
  'IdThing': 3,
  'IdTrace': 4,
  'Id3d': 5,
  'IdArea': 6,
  'IdLabel': 7,
  'IdSign': 8,
  'IdTag': 9,
  'IdHeat': 10,
  'IdStat': 11,
  'IdSheet': 12,
  'IdAnchor': 13,
  'IdDevice': 14,
  'IdData': 15
}

const LAYER_DEFINES = [
  { idx: LAYER_ID_DEFS['IdBg'], name: 'bg', title: '背景图', layer: null, type: 'image', runShow: true, enableAltitude: false, imgUrl: 'static/img/white.png' },
  { idx: LAYER_ID_DEFS['IdBorder'], name: 'border', title: '底框图层', layer: null, type: 'vector', runShow: true, enableAltitude: false },
  { idx: LAYER_ID_DEFS['IdWall'], name: 'wall', title: '墙壁图层', layer: null, type: 'vector', runShow: true, enableAltitude: true },
  { idx: LAYER_ID_DEFS['IdThing'], name: 'thing', title: '物件图层', layer: null, type: 'vector', runShow: true, enableAltitude: true },
  { idx: LAYER_ID_DEFS['IdTrace'], name: 'trace', title: '轨迹图层', layer: null, type: 'vector', runShow: true, enableAltitude: false },
  { idx: LAYER_ID_DEFS['Id3d'], name: '3d', title: '3D图层', layer: null, type: 'vec3d', runShow: true, enableAltitude: true },
  { idx: LAYER_ID_DEFS['IdArea'], name: 'area', title: '区域图层', layer: null, type: 'vector', runShow: false, enableAltitude: true },
  { idx: LAYER_ID_DEFS['IdLabel'], name: 'label', title: '文本图层', layer: null, type: 'vector', runShow: true, enableAltitude: true },
  { idx: LAYER_ID_DEFS['IdSign'], name: 'sign', title: '标记图层', layer: null, type: 'cluster', runShow: true, enableAltitude: true },
  { idx: LAYER_ID_DEFS['IdTag'], name: 'tag', title: '标签图层', layer: null, type: 'cluster', runShow: true, enableAltitude: true },
  { idx: LAYER_ID_DEFS['IdHeat'], name: 'heat', title: '热力图层', layer: null, type: 'heat', runShow: true, enableAltitude: false },
  { idx: LAYER_ID_DEFS['IdStat'], name: 'stat', title: '统计图层', layer: null, type: 'vector', runShow: true, enableAltitude: false },
  { idx: LAYER_ID_DEFS['IdSheet'], name: 'sheet', title: '权限图层', layer: null, type: 'vector', runShow: false, enableAltitude: true },
  { idx: LAYER_ID_DEFS['IdAnchor'], name: 'anchor', title: '信标图层', layer: null, type: 'vector', runShow: true, enableAltitude: true },
  { idx: LAYER_ID_DEFS['IdDevice'], name: 'device', title: '设备图层', layer: null, type: 'vector', runShow: false, enableAltitude: true },
  { idx: LAYER_ID_DEFS['IdData'], name: 'data', title: '数据图层', layer: null, type: 'vector', runShow: true, enableAltitude: true }
]

export {
  Laycon,
  LAYER_ID_DEFS,
  LAYER_DEFINES
}