slble-attend/sl.ble_sys-attend/src-js/components/MapEditor/index.vue

<template>
  <div class="mapEditorOuter">
    <div :ref="refname" class="mapBox">
    </div>
  </div>
</template>

<script>
// import * as maptalks from 'maptalks'
// import axios from 'axios'

import { MapEngine } from './mapEngine'

const vGlobal = window.vueGlobal

export default {
  name: 'mapTalksEditor',
  directives: {},
  components: {  },
  filters: {},
  props: {
    refname: {
      type: String,
      default: 'mapCon'
    },
    rt: {
      type: Boolean,
      default: true
    },
    bearing: {
      type: Number,
      default: 0
    },
    centerX: {
      type: Number,
      default: 0
    },
    centerY: {
      type: Number,
      default: 0
    },
    editable: {
      type: Boolean,
      default: false
    },
    pitch: {
      type: Number,
      default: 0
    },
    resolutions: {
      type: Array,
      default: function() {
        return [64, 48, 32, 16, 12, 10, 8, 6, 5, 4, 3, 2, 1, 0.5, 0.25, 0.1]
      }
    },
    xmax: {
      type: Number,
      default: 1
    },
    xmin: {
      type: Number,
      default: 0
    },
    ymax: {
      type: Number,
      default: 1
    },
    ymin: {
      type: Number,
      default: 0
    },
    zoom: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      isShowTool: false,
      isCreated: false,
      mapEngine: new MapEngine(),
      downloadLoading: false,
      drawSymbol: {
        'lineWidth': 1,
        'lineColor': 'rgba(0,0,0,1)',
        'textSize': 10,
        'textFill': 'rgba(0,0,0,1)',
        'textHaloRadius': 1,
        'textHaloFill': 'rgba(255,255,255,1)',
        'fillColor': 'rgba(135,135,135,1)',
        'altitude': 0,
        'height': 0,
        'boxWidth': 200,
        'boxHeight': 30
      },
      drawMode: null,
      drawTool: null,
      drawEnable: false,
      fileList: [],
      imageLayer: null,
      isUpload: false,
      originView: null,
      raycaster: null,
      selectGeos: [],
      selectLayer: null,
      sortLayers: ['border', 'wall', 'thing', 'vec3d', 'sign', 'region', 'test'],
      threeLayer: null,
      vec3dHeight: 0
    }
  },
  computed: {},
  watch: {
  },
  created() {
  },
  mounted() {
    const cid = setInterval(() => {
      if (vGlobal.isInited()) {
        this.firstCreate()
        this.init()
        clearInterval(cid)
        vGlobal ? vGlobal.mapEngine = this.mapEngine : null
      }
    }, 100)
  },
  methods: {
    firstCreate() {
      this.mapEngine.editable = this.editable
      this.mapEngine.createAtlas(this.$refs[this.refname])
      this.mapEngine.createLaycons()
      vGlobal.mapEngine = this.mapEngine
      this.isCreated = true
    },
    init() {
      this.drawEnable = true
    },
    initPosition() {
      if (this.$refs.drawPanel) {
        this.$refs.drawPanel.initPosition()
      }
      if (this.$refs.symbolPanel) {
        this.$refs.symbolPanel.initPosition()
      }
      if (this.$refs.layerPanel) {
        this.$refs.layerPanel.initPosition()
      }
      if (this.$refs.objPanel) {
        this.$refs.objPanel.initPosition()
      }
      if (this.$refs.propPanel) {
        this.$refs.propPanel.initPosition()
      }
      if (this.$refs.scalePanel) {
        this.$refs.scalePanel.initPosition()
      }
    }
  }
}
</script>

<style scoped>
.mapEditorOuter{
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;

}

.toolButton{
  position: absolute;
  right: 4px;
  bottom: 0px;
  z-index: 10000;
}
.item-runPanel{
  position: absolute;
  right: 105px;
  bottom: 6px;
}
.mapBox{
  width: 100%;
  height: 100%;
  z-index: 10;
  /*border: 1px solid black;*/
}

</style>