<template>
  <div>
    <div id="heatmapContainer" style="width: 2048px; height: 2048px; visibility: hidden;"></div>
    <div id="popDiv" class="pop-class">
      <div>   <el-table
        :data="tableData"
        height="280px"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table></div>
    </div>
  </div>
</template>
<script>

import Vue from 'vue'

import mapJson from "@/assets/mapJson/map.json";
import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
var Cesium = require('../../../node_modules/cesium/Source/Cesium')
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer'    // 导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl'
import { mmClick } from "../../utils/freedo";
import {onCameraChanged} from "../../utils/freedo/heat";    // 让Cesium知道静态资源在哪里的API
Vue.prototype.Cesium = Cesium

export default {
  name: 'FreedoMap',
  props: {
    // 地图唯一性标识
    mapKey: {
      type: String,
      default: ''
    },
    // 自定义参数
    options: Object,
    // 是否插入到body元素上
    appendToBody: {
      type: Boolean,
      default: false
    },
    // 是否需要加光
    needBloomEffect: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [
        {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
        {date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄'},
        {date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},
        {date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},
        {date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},
        {date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},
        {date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},
        {date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},
        {date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},
        {date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄'},
        {date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄'}
      ],
      center: ['', ''] // 地图中心
    }
  },
  mounted() {
    if (this.appendToBody) {
      document.body.appendChild(this.$el)
    }
    if (this.mapKey) {
      this.initFreedo()
    }
  },
  beforeDestroy() {
    if(window.viewer) {
      window.viewer.destroy()
    }
  },

  methods: {
    initFreedo() {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0N2E2M2ZmYi1iMDhjLTQwN2QtODZmOC0zNDZjNTMxYjgyNWEiLCJpZCI6MzY5MDMsImlhdCI6MTYwNzMzMTE2Nn0.5xsFCB0dxpcNGUkJOEpsVhUW9bf66XZIwV3hkZl09UI'
      // 以下为杜婷婷个人申请token
      // Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ZTBlMDZmNS0wOGU0LTRkN2MtYmE4OS1hYjRlYjlmMDQxMGYiLCJpZCI6MjQ0MjQyLCJpYXQiOjE3MjczMzQ5NTN9.xxh8AMRVH-qSqgstx59FcMMZMFP6rOewWlUJs-5kQI0'
      if (window.viewer) {
        window.viewer.destroy()
      }
      let viewer = Freedo.FdApp.createDefaultViewer(`freedoContainer`, {}, { showNewDefImagery: true })
      viewer.scene.screenSpaceCameraController.enableCollisionDetection = false
      // 倾斜视图 鼠标右键旋转
      viewer.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG ]
      // 缩放设置 重新设置缩放成员
      viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
      // 鼠标左键平移
      viewer.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]

      // 设置地图底图片
      viewer.imageryLayers._layers[0].show = false
      viewer.scene.globe.baseColor = Cesium.Color.fromBytes(9,18,26,1)
      // Vue.prototype.viewer = viewer;
      window.viewer = viewer
      window.imageryManager = new Freedo.FdTools.FdImageryLayersManager(viewer)
      window.terrainManager = new Freedo.FdTools.FdTerrain(viewer)
      window.pmtsManager = new Freedo.FdTools.FdPMTSManager(viewer)
      window.mmManager = new Freedo.FdModel.FdModelManager(viewer)
      window.mmManager.setClickEventOn()
      // 弹窗
      var pmManager = new Freedo.FdModel.FdModelManager(viewer)
      window.popWindow = pmManager.add('DivLabel', {
        position: [114.86, 25.75, 1000],
        show: false,
        divId: 'popDiv',
        offset: 10
      });
      window.mmManager.on(function (eventType, eventArg) {
        mmClick(eventType, eventArg)
        // if (eventType == "EntSelected") {
        //   if (eventArg.type === 'Billboard') {
        //     console.log(eventArg.option.option.divID);
        //   }
        // }
      });
      window.terrainManager.setTerrain(mapJson['CIM2']['地形'], 'WETS');
      viewer.scene.requestRenderMode = false
      // 热力图
      window.heatmapPrimitives = []
      viewer.scene.camera.changed.addEventListener((percent) => {
        onCameraChanged();
      })
      this.initLayers()
      setTimeout(() => {
        if(window.viewer.imageryLayers.get(1)) {
          window.viewer.imageryLayers.get(1).maximumLevel = 17
        }
      }, 2000)
    },
    initLayers(){
      for(let i = window.imageryManager.length-1; i>0; i--) {
        window.imageryManager.remove(i)
      }
      // 底图
      window.imageryManager.addByPMTS({
        // url: 'http://11.100.6.9:8088/cim-proxy//cluster_273/FreedoMetaSvc/service/meta/wmts/dataset/1.0.0/WMTSCapabilities.xml?token=RoVinIN04xLQXlwIB9Ho7I0L8JnIUH10tceYF6xEGgb8qh_iJqSVTJBUdIOjvIpW7NN6DqCMa1Mfb25nNuoNpq1dRaIYvmZIQP6L9htZK0eztH0DrwiueFtUAesMAuzCZDYEz2_DBphxcM5iOMpPi_r6_6AF0BfsB6oF1K1IG8nwlq27TG2lL-YV0TRQBOekzaKzdM3AiRHJZC2GeWVgy1iEsKFwrG6c_e_x54UqqN8vVn_Wz_pr04VpEZuseV16p3f2RkYn9L98u1kyF2Gpw15MCo_u2gvOZDcmb9B8SNHidQSkLwDv6-O2mn4oxiZI9boe8T6Jv83BK2cUD618fQ==&id=dfd7438f-a4ab-4446-bc21-52c2995cd08c&freedoToken=21232f297a57a5a743894a0e4a801fc3',
        // url: 'http://11.100.6.9:8088/cim-proxy//cluster_273/FreedoMetaSvc/service/meta/wmts/dataset/1.0.0/WMTSCapabilities.xml?token=RoVinIN04xLQXlwIB9Ho7I0L8JnIUH10tceYF6xEGgb8qh_iJqSVTJBUdIOjvIpW7NN6DqCMa1Mfb25nNuoNpq1dRaIYvmZIQP6L9htZK0eztH0DrwiueFtUAesMAuzCZDYEz2_DBphxcM5iOMpPi_r6_6AF0BfsB6oF1K1IG8nwlq27TG2lL-YV0TRQBOekzaKzdM3AiRHJZC2GeWVgy1iEsKFwrG6c_e_x54UqqN8vVn_Wz_pr04VpEZuseV16p3f2RkYn9L98u1kyF2Gpw15MCo_u2gvOZDcmb9B8SNHidQSkLwDv6-O2mn4oxiZI9boe8T6Jv83BK2cUD618fQ==&amp;id=dfd7438f-a4ab-4446-bc21-52c2995cd08c&amp;freedoToken=21232f297a57a5a743894a0e4a801fc3',
        // url: 'http://11.100.6.9:8088/cim-proxy//cluster_289/iserver/services/map-AnLanSeShiLiangDiTu/rest/maps/暗蓝色地图?freedoToken=21232f297a57a5a743894a0e4a801fc3',
        url: 'http://11.100.6.9:18088//cim-proxy/cluster_864/FreedoMetaSvc/service/meta/wmts/dataset/1.0.0/WMTSCapabilities.xml?token=RoVinIN04xLQXlwIB9Ho7I0L8JnIUH10tceYF6xEGgb8qh_iJqSVTJBUdIOjvIpW7NN6DqCMa1Mfb25nNuoNpq1dRaIYvmZIQP6L9htZK0eztH0DrwiueFtUAesMAuzCZDYEz2_DBphxcM5iOMpPi_r6_6AF0BfsB6oF1K1IG8nwlq27TG2lL-YV0TRQBOekzaKzdM3AiRHJZC2GeWVgy1iEsKFwrG6c_e_x54UqqN8vVn_Wz_pr04VpEZuseV16p3f2RkYn9L98u1kyF2Gpw15MCo_u2gvOZDcmb9B8SNHidQSkLwDv6-O2mn4oxiZI9boe8T6Jv83BK2cUD618fQ==&id=10688974-67be-42b8-8ec5-bf91fd775251&freedoToken=21232f297a57a5a743894a0e4a801fc3',
        show: true,
        name: 'geo',
        autoFly: true
      }, 1)
      // setTimeout(() => {
        this.initCIM()
      // },1000)
    },
    initCIM() {
      for(let key in mapJson['CIM1']) {
        window.imageryManager.addByPMTS({
          url: mapJson['CIM1'][key],
          show: false,
          name: key
        })
      }
      for(let key in mapJson['CIM2']) {
        if(key === '地形') continue
        window.pmtsManager.add({
          url: mapJson['CIM2'][key],
          show: false,
          id: key,
          autoFlyto: false
        })
      }
      for(let key in mapJson['CIM3']) {
        window.pmtsManager.add({
            id: key,
            url: mapJson['CIM3'][key],
            show: false,
            autoFlyto: false,
          },
          undefined
        )
      }
      for(let key in mapJson['CIM4']) {
        window.pmtsManager.add({
            id: key,
            url: mapJson['CIM4'][key],
            show: false,
            maximumScreenSpaceError: 32,
            maximumMemoryUsage: 64,
            maximumAbsoluteMemoryUsage: 8192,
            autoFlyto: false,
          },
          undefined
        )
      }
    },
    updatePopupContent(id) {
      var idArr = id.split('-');
      if (idArr[0] === 'DivPoint' && idArr[1]) {
        var index = idArr[1];
        var html = popupTextList[index];
        popupContent.innerHTML = html;
      }
    }
  }
}
</script>

<style scoped>
.item {
  background-color: #09121a;
}
.pop-class {
  position: fixed;
  display:none;
  background: url("../../assets/images/popup/弹窗展开背景.png") no-repeat;
  background-size: 100% 100%;
  width:600px;
  height:300px;
  color: white;
  font-size: 24px;
  padding: 10px;
}
</style>