<template>
    <div style="wight:100%;height:100%;position: relative;">
      <div :id="`mars3d-container${mapKey}`"
      :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>

      <div class="infoview">
        <div style="display: inline-block;color:red;font-weight:bolder;">点击地图设置坐标</div>
      </div>

      <img src="../../assets/images/cutGraph/maplogo1.jpg" class="maplogo1Img4">

    </div>

  </template>

  <script>
  import Vue from 'vue'
  import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';

  // 使用免费开源版本
  import 'mars3d/dist/mars3d.css'
  import * as mars3d from 'mars3d'
  import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
  import  { initGraphicManager,initLayerManager,bindLayerContextMenu } from './js/graphicManager'
  import kongzhidiantubiao from '../../assets/images/cutGraph/kongzhidian1.png'


  // 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
  // echarts插件
  // import 'mars3d-echarts'

  // 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
  Vue.prototype.mars3d = mars3d
  Vue.prototype.Cesium = mars3d.Cesium

  var map;
  export default {
    name: 'mars3dViewer',
    data(){
      return{

      }
    },
    props: {
      // 初始化配置参数
      url: String,

      // 地图唯一性标识
      mapKey: {
        type: String,
        default: ''
      },

      // 自定义参数
      options: Object,

      // 是否分屏显示
      compare: {
        type: Boolean,
        default: false
      },

      // 是否插入到body元素上
      appendToBody: {
        type: Boolean,
        default: false
      },

      // 自定义css类名
      customClass: {
        type: String,
        default: ''
      }
    },

    destroy() {
      this[`map${this.mapKey}`].destroy()
      delete this[`map${this.mapKey}`]
    },
    created(){
      this.$nextTick(() => {
        mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
          this.initMars3d(data.map3d)// 构建地图
        })
      });
    },
    methods: {
      //创建地图
      initMars3d(options) {
        let that = this;
        const mapOptions = {
          ...options,
          ...this.options,
          control: {
            defaultContextMenu: false, //右键菜单
          },
        }
        // 创建三维地球场景
        map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions);
        this[`map${this.mapKey}`] = map;
        this.$emit('onload', map);

      },

    }
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style >
  .maplogo1Img4{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 6vw;
    height: 2.5vh;
  }
  .cesium-viewer-toolbar{

    display: none !important;
  }
  .mars3d-compass{
    display: none !important;
  }
  .mars3d-locationbar{
    display: none !important;
  }
  .mars3d-distance-legend{
    display: none !important;
  }
  .mars3d-container {
    height: 100%;
    width: 100vw;
    overflow: hidden;
  }

  /* 重写Cesium的css */

  /**cesium按钮背景色*/
  .cesium-button {
    background-color: #3f4854;
    color: #e6e6e6;
    fill: #e6e6e6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    line-height: 32px;
  }

  .cesium-viewer-geocoderContainer .cesium-geocoder-input {
    background-color: rgba(63, 72, 84, 0.7);
  }

  .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
    background-color: rgba(63, 72, 84, 0.9);
  }

  .cesium-viewer-geocoderContainer .search-results {
    background-color: #3f4854;
  }

  .cesium-geocoder-searchButton {
    background-color: #3f4854;
  }

  .cesium-infoBox-title {
    background-color: #3f4854;
  }

  .cesium-infoBox {
    background: rgba(63, 72, 84, 0.9);
  }

  .cesium-toolbar-button img {
    height: 100%;
  }

  .cesium-performanceDisplay-defaultContainer {
    top: auto;
    bottom: 35px;
    right: 50px;
  }
  .cesium-performanceDisplay-ms,
  .cesium-performanceDisplay-fps {
    color: #fff;
  }

  /**cesium工具栏位置*/
  .cesium-viewer-toolbar {
    top: auto;
    left: auto;
    right: 12px;
    bottom: 35px;
  }

  .cesium-viewer-toolbar > .cesium-toolbar-button,
  .cesium-navigationHelpButton-wrapper,
  .cesium-viewer-geocoderContainer {
    margin-bottom: 5px;
    float: right;
    clear: both;
    text-align: center;
  }

  .cesium-baseLayerPicker-dropDown {
    bottom: 0;
    right: 40px;
    max-height: 700px;
    margin-bottom: 5px;
  }

  .cesium-navigation-help {
    top: auto;
    bottom: 0;
    right: 40px;
    transform-origin: right bottom;
  }

  .cesium-sceneModePicker-wrapper {
    width: auto;
  }

  .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
    float: left;
    margin: 0 3px;
  }

  .cesium-viewer-geocoderContainer .search-results {
    left: 0;
    right: 40px;
    width: auto;
    position: absolute;
    z-index: 999;
  }

  .cesium-infoBox-title {
    background-color: #3f4854;
  }

  .cesium-infoBox {
    top: 50px;
    background: rgba(63, 72, 84, 0.9);
  }

  /**左下工具栏菜单*/
  .toolbar-dropdown-menu-div {
    background: rgba(43, 44, 47, 0.8);
    border: 1px solid #2b2c2f;
    z-index: 999;
    position: absolute;
    right: 60px;
    bottom: 40px;
    display: none;
  }

  .toolbar-dropdown-menu {
    min-width: 110px;
    padding: 0;
  }
  .toolbar-dropdown-menu > li {
    padding: 0 3px;
    margin: 2px 0;
  }
  .toolbar-dropdown-menu > li > a {
    color: #edffff;
    display: block;
    padding: 4px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
  }

  .toolbar-dropdown-menu > li > a:hover,
  .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: #444d59;
  }

  .toolbar-dropdown-menu > .active > a,
  .dropdown-menu > .active > a:hover,
  .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #444d59;
  }

  .toolbar-dropdown-menu i {
    padding-right: 5px;
  }

  .infoview{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50vw;
    z-index: 1000;
  }
  </style>
