<template>
    <div :id="`mars3d-container${mapKey}`" class="mars3d-container"></div>
</template>

<script>
import Vue from 'vue'
// 使用免费开源版本
// import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
import 'mars3d-space'
import { mapUtil } from '@/tool/mapTool'

// let mars3d = window.mars3d

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

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

export default {
    name: 'mars3dViewer',

    props: {
        // 地图唯一性标识
        mapKey: {
            type: String,
            default: ''
        },
        // 初始化配置config.json的地址
        url: String,
        // 自定义参数
        options: Object
    },
    mounted() {
        mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
            // 构建地图
            this.initMars3d({
                ...data.map3d,
                ...this.options
            })
        })
    },

    beforeDestroy() {
        const map = this[`map${this.mapKey}`]
        if (map) {
            map.destroy()
            delete this[`map${this.mapKey}`]
        }
        console.log('>>>>> 地图卸载完成 >>>>')
    },

    methods: {
        initMars3d(mapOptions) {
            // 创建三维地球场景
            var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
            this[`map${this.mapKey}`] = map
            mapUtil.initMap(map, this)
            console.log('>>>>> 地图创建成功 >>>>', map)

            // 监听鼠标移动事件
            map.on(mars3d.EventType.mouseMove, this.showMouseCoordinates)

            // 挂载到全局对象下，所有组件通过 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)
            // }

            // 抛出事件
            this.$emit('onload', map)
        },

        showMouseCoordinates(event) {
            // 获取鼠标在屏幕上的位置
            const windowPosition = event.endPosition
            // 转换为笛卡尔空间直角坐标
            const cartesian3 = mars3d.PointUtil.getCurrentMousePosition(this.map.scene, windowPosition)
            if (cartesian3) {
                // 将笛卡尔坐标转换为地理坐标（经纬度）
                const position = this.Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian3)

                // 将坐标格式化为字符串
                let lng = this.Cesium.Math.toDegrees(position.longitude).toFixed(6)
                let lat = this.Cesium.Math.toDegrees(position.latitude).toFixed(6)
                let height = position.height.toFixed(2)

                let mars3dLngLat = {
                  lng: lng,
                  lat: lat,
                  height: height
                }
                this.$parent.$refs.HomeFooter1.mars3dLngLat = mars3dLngLat
                console.log(`经度：${lng}° 纬度：${lat}° 高程：${height}米`)

                // 更新鼠标位置显示元素的内容
            }
        }
    }
}
</script>

<style lang='less'>
.mars3d-container {
    height: 100%;
    overflow: hidden;
}

/**cesium 工具按钮栏*/
.cesium-viewer-toolbar {
    top: 110px !important;
    right: 18px !important;
}

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

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

.cesium-button {
    background-color: #3f4854;
    color: #e6e6e6;
    fill: #e6e6e6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    line-height: 32px;
    float: right;
}

/**cesium 底图切换面板*/
.cesium-baseLayerPicker-dropDown {
    bottom: -200px;
    right: 40px;
    max-height: 700px;
    margin-bottom: 5px;
}

/**cesium 帮助面板*/
.cesium-navigation-help {
    top: auto;
    bottom: 0;
    left: 40px;
    transform-origin: left bottom;
}

/**cesium 二维三维切换*/
.cesium-sceneModePicker-wrapper {
    width: auto;
}

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

/**cesium POI查询输入框*/
.cesium-viewer-geocoderContainer .search-results {
    left: 0;
    right: 40px;
    width: auto;
    z-index: 9999;
}

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

.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 info信息框*/
.cesium-infoBox {
    top: 50px;
    background: rgba(63, 72, 84, 0.9);
}

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

/**cesium 任务栏的FPS信息*/
.cesium-performanceDisplay-defaultContainer {
    top: auto;
    bottom: 35px;
    right: 50px;
}

.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
    color: #fff;
}

/**cesium tileset调试信息面板*/
.cesium-viewer-cesiumInspectorContainer {
    top: 10px;
    left: 10px;
    right: auto;
    background-color: #3f4854;
}

.cesium-widget {
    canvas {
        width: 100%;
        height: 105%;
        touch-action: none;
    }
}
</style>

vue。confg。vue的配置文件

const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')


module.exports = {
  publicPath: '/',
  assetsDir: 'static',
  outputDir: 'dist',
  lintOnSave: false, // 是否开启eslint
  productionSourceMap: false, // 不需要生产环境的 source map
  filenameHashing: true, // 文件名哈希
  // 它支持webPack-dev-server的所有选项
  // devServer: {
  //   host: '0.0.0.0', // 也可以直接写IP地址这样方便真机测试
  //   port: 3001, // 端口号
  //   open: true // 配置自动启动浏览器
  // },

  devServer: {
    // host: '0.0.0.0', // 也可以直接写IP地址这样方便真机测试
    port: 3001, // 端口号
    // open: true, // 配置自动启动浏览器
    proxy: {
      '/navy': {
        // target: 'http://10.18.5.29:9520', // 后台网关地址
        target: 'http://10.18.101.36:9520', // 后台网关地址
        // ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/navy': ''
        }
      },

      '/server': {
        // target: 'http://10.18.5.29:9520', // 后台网关地址
        target: 'http://10.18.101.36:9520', // 后台网关地址
        // target: 'http://3.128.124.83:9520', // 后台网关地址
        // ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/server': ''
        }
      },

    }
  },


  configureWebpack: (config) => {
    if (process.env.VUE_APP_MARS3D_SOURCE === 'module') {
      const cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' // cesium库安装目录
      const cesiumRunPath = './mars3d-cesium/' // cesium运行时路径

      let plugins = [
        // 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
        new webpack.DefinePlugin({
          CESIUM_BASE_URL: JSON.stringify(path.join(config.output.publicPath, cesiumRunPath))
        }),
        // Cesium相关资源目录需要拷贝到系统目录下面（部分CopyWebpackPlugin版本的语法可能没有patterns）
        new CopyWebpackPlugin({
          patterns: [
            { from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') },
            { from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') },
            { from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') },
            { from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }
          ]
        }),
        new NodePolyfillPlugin()
      ]
      return {
        module: { unknownContextCritical: false }, // 配置加载的模块类型，cesium时必须配置
        plugins: plugins
      }
    } else {
      return {
        externals: { 'mars3d-cesium': 'Cesium' } //排除使用 mars3d-cesium
      }
    }
  },
  css: {
    // 启用 CSS modules
    // requireModuleExtension: false,
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps，一般不建议开启
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      sass: {
        prependData: '@import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";',
      },
    },
  },
}