76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="HomeMpa">
|
||
|
|
<div id="mars3dContainer" ref="MarsMap" class="mars3d-container"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
"use script";
|
||
|
|
import { mapGetters } from "vuex";
|
||
|
|
export default {
|
||
|
|
name: "HomeMap",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
player: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// console.clear();
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getMapJson();
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapGetters(["statePage", "cityCode"])
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getMapJson() {
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
mars3d.Util.fetchJson({
|
||
|
|
// ***_***
|
||
|
|
url: "/configJson/map.json"
|
||
|
|
}).then((res) => {
|
||
|
|
this.initMarsMap({
|
||
|
|
// 合并配置项
|
||
|
|
...res.map3d
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
initMarsMap(options) {
|
||
|
|
let map;
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
map = new mars3d.Map(this.$refs.MarsMap, options);
|
||
|
|
// eslint-disable-next-line no-unused-vars
|
||
|
|
window.marsMap = map;
|
||
|
|
// 禁止右键菜单
|
||
|
|
// map.unbindContextMenu();
|
||
|
|
//禁用切换动画效果
|
||
|
|
if (map.viewer.sceneModePicker) {
|
||
|
|
map.viewer.sceneModePicker.viewModel.duration = 0.0;
|
||
|
|
}
|
||
|
|
// map构造完成后的一些处理
|
||
|
|
this.onMapLoad(map);
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
map.on(mars3d.EventType.click, this.map_clickHandler, map);
|
||
|
|
},
|
||
|
|
map_clickHandler(event) {
|
||
|
|
console.log(event);
|
||
|
|
},
|
||
|
|
onMapLoad(map) {
|
||
|
|
map.changeMouseModel(true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.HomeMpa {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
#mars3dContainer {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|