<!--Mars 3D地图-->
<template>
  <div
    :id="`mars3d-container${mapKey}`"
    :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"/>
</template>

<script>
import axios from 'axios'
export default {
  name: 'MarsMap',
  props: {
    // 初始化配置参数
    url: {
      type: String,
      required: true
    },
    // 地图唯一性标识
    mapKey: {
      type: String,
      default: ''
    },

    // 自定义参数
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 是否分屏显示
    compare: {
      type: Boolean,
      default: false
    },
    // 是否插入到body元素上
    appendToBody: {
      type: Boolean,
      default: false
    },
    // 自定义css类名
    customClass: {
      type: String,
      default: ''
    }
  },

  mounted() {
    const { mars3d } = this
    if (this.appendToBody) {
      document.body.appendChild(this.$el)
    }

    if (this.mapKey) {
      this.initMars3d(this.options)
    } else {
      mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
        this.initMars3d(data.map3d)// 构建地图
      })
    }
  },

  destroy() {
    this[`map${this.mapKey}`].destroy()
    delete this[`map${this.mapKey}`]
  },

  methods: {
    initMars3d(options) {
      const { mars3d } = this
      if (this[`map${this.mapKey}`]) return

      const mapOptions = {
        ...options,
        ...this.options
      }

      // 创建三维地球场景
      var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)

      this[`map${this.mapKey}`] = map

      console.log('>>>>> 地图创建成功 >>>>', map)

      // 挂载到全局对象下，所有组件通过 this.map 访问
      // Vue.prototype[`map${this.mapKey}`] = map

      // 绑定对alert的处理，右键弹出信息更美观。
      window.haoutil = window.haoutil || {}
      window.haoutil.msg = (msg) => {
        this.$message.success(msg)
      }
      window.haoutil.alert = (msg) => {
        this.$message.success(msg)
      }
      // // 背景透明
      map._viewer.scene.backgroundColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
      map._viewer.scene.globe.baseColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
      map._viewer.scene.globe.baseColor.alpha = 0
      this.addProvincePolygon()
      // this.addLine()
      // this.addPipe()
      // 抛出事件
      this.$emit('onload', map)
    },
    // 显示城市边界线数据
    addLine() {
      const { mars3d } = this
      const geoJsonLayer = new mars3d.layer.GeoJsonLayer({
        name: '省界线',
        url: 'static/geojson/140000.json',
        symbol: {
          styleOptions: {
            lineType: 'glow',
            glowPower: 0.9,
            opacity: 0.3, // 透明度
            color: '#87ffff',
            outline: true, // 边框
            outlineColor: '#87ffff', // 边框颜色
            outlineWidth: 3, // 边框宽度
            fill: false, // 是否填充
            width: 5, // 宽度
            height: 20000,
            clampToGround: false
            // label: {
            //   // 面中心点，显示文字的配置
            //   text: '{name}', // 对应的属性名称
            //   opacity: 1,
            //   font_size: 20,
            //   color: '#ffffff',
            //
            //   font_family: '楷体',
            //   outline: true,
            //   outlineColor: '#ffffff',
            //   outlineWidth: 1,
            //
            //   background: false,
            //   backgroundColor: '#000000',
            //   backgroundOpacity: 0.1,
            //
            //   font_weight: 'normal',
            //   font_style: 'normal',
            //
            //   scaleByDistance: true,
            //   scaleByDistance_far: 20000000,
            //   scaleByDistance_farValue: 0.1,
            //   scaleByDistance_near: 1000,
            //   scaleByDistance_nearValue: 1,
            //
            //   distanceDisplayCondition: false,
            //   distanceDisplayCondition_far: 10000,
            //   distanceDisplayCondition_near: 0,
            //   visibleDepth: false
            // }
          }
        },
        flyTo: true
      })
      this.map.addLayer(geoJsonLayer)
    },
    // 管线
    addPipe() {
      console.log('addPipe')
      const { mars3d } = this
      const tileLayer = new mars3d.layer.ArcGisLayer({
        url: 'http://10.100.253.175:6080/arcgis/rest/services/line/MapServer?f=jsapi',
        enablePickFeatures: false
      })
      this.map.addLayer(tileLayer)
    },
    addProvincePolygon() {
      const { mars3d, Cesium } = this
      var graphicLayer = new mars3d.layer.DivLayer()
      this.polygonLayer = graphicLayer
      this.map.addLayer(graphicLayer)
      axios.get('static/geojson/140000.json').then((res) => {
        if (res.status === 200) {
          const features = res.data.features
          for (let i = 0; i < features.length; i++) {
            const coordinates = (features[i].geometry.coordinates[0][0]).map(item => {
              return [item[0], item[1], 0]
            })
            console.log(features[i].geometry.coordinates)
            const graphic = new mars3d.graphic.PolygonEntity({
              positions: coordinates,
              style: {
                height: -10000,
                hasShadows: true,
                diffHeight: 10000.0,
                color: '#3a77da',
                opacity: 1,
                outline: true,
                outlineColor: '#4764c9',
                outlineWidth: 3,
                outlineOpacity: 1,
                label: {
                  // 面中心点，显示文字的配置
                  text: features[i].properties.name, // 对应的属性名称
                  opacity: 1,
                  font_size: 20,
                  color: '#ffffff',
                  font_family: '楷体',
                  background: false,
                  backgroundColor: '#000000',
                  backgroundOpacity: 0.1,
                  font_weight: 'normal',
                  font_style: 'normal',
                  scaleByDistance: true,
                  scaleByDistance_far: 20000000,
                  scaleByDistance_farValue: 0.1,
                  scaleByDistance_near: 1000,
                  scaleByDistance_nearValue: 1,
                  clampToGround: false,
                  distanceDisplayCondition: false,
                  distanceDisplayCondition_far: 10000,
                  distanceDisplayCondition_near: 0,
                  visibleDepth: false
                }
              }
            })
            graphicLayer.addGraphic(graphic)
          }
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
  .mars3d-container {
    height: 100%;
    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;
    z-index: 9999;
  }

  .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: 991;
    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;
  }
</style>