<template>
|
<div :id="`mars3d-container${mapKey}`"
|
class="mars3d-container"></div>
|
</template>
|
|
<script>
|
import Vue from 'vue'
|
|
// let mars3d = window.mars3d
|
|
// 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}`]
|
}
|
},
|
|
methods: {
|
initMars3d (mapOptions) {
|
if (this[`map${this.mapKey}`]) {
|
this[`map${this.mapKey}`].destroy()
|
}
|
|
// 创建三维地球场景
|
var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
|
|
this[`map${this.mapKey}`] = map
|
|
console.log('>>>>> 地图创建成功 >>>>', map)
|
let c_context_menu = map.getDefaultContextMenu();
|
map.bindContextMenu(c_context_menu.slice(0, 3).concat(c_context_menu[7]).concat(c_context_menu[8]));
|
|
|
// 挂载到全局对象下，所有组件通过 this.map 访问
|
//Vue.prototype[`map${this.mapKey}`] = map
|
window.marsmap = 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)
|
}
|
}
|
}
|
</script>
|
|
<style >
|
.mars3d-container {
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.mars3d-compass {
|
display: none;
|
}
|
|
/**cesium 工具按钮栏*/
|
.cesium-viewer-toolbar {
|
display: none;
|
top: auto !important;
|
bottom: 35px !important;
|
left: 12px !important;
|
right: auto !important;
|
}
|
.cesium-toolbar-button img {
|
height: 100%;
|
}
|
.cesium-viewer-toolbar > .cesium-toolbar-button,
|
.cesium-navigationHelpButton-wrapper,
|
.cesium-viewer-geocoderContainer {
|
margin-bottom: 5px;
|
float: left;
|
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;
|
}
|
|
/**cesium 底图切换面板*/
|
.cesium-baseLayerPicker-dropDown {
|
bottom: 0;
|
left: 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;
|
}
|
</style>
|
