148 lines
3.9 KiB
Vue
148 lines
3.9 KiB
Vue
<template>
|
||
<div class="HomeMpa">
|
||
<div class="zoom-level">当前缩放等级: {{ zoomLevel }}</div>
|
||
<div id="mars3dContainer" ref="MarsMap" class="mars3d-container"></div>
|
||
<div class="pointingNorth" @click="mapNorth">
|
||
<img src="@/assets/img/menu/zhibeizhen.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
"use script";
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
name: "HomeMap",
|
||
data() {
|
||
return {
|
||
player: null,
|
||
zoomLevel: 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.on(mars3d.EventType.cameraMoveEnd, this.map_zoomHandler, map);
|
||
// map.scene.screenSpaceCameraController.enableTranslate = false;
|
||
// map.scene.screenSpaceCameraController.enableRotate = false; // 禁用旋转
|
||
// map.scene.screenSpaceCameraController.enableTilt = false; // 禁用倾斜
|
||
// map.scene.screenSpaceCameraController.enableZoom = false; // 禁用缩放
|
||
},
|
||
map_clickHandler(event) {
|
||
console.log(event);
|
||
},
|
||
map_zoomHandler(event) {
|
||
let { alt } = window.marsMap.getCameraView();
|
||
this.zoomLevel = this.estimateZoomLevel(alt);
|
||
console.log(this.zoomLevel);
|
||
},
|
||
estimateZoomLevel(height) {
|
||
const maxZoom = 18;
|
||
const baseHeight = 1000;
|
||
const zoom = maxZoom - Math.log2(height / baseHeight);
|
||
return Math.round(zoom);
|
||
},
|
||
onMapLoad(map) {
|
||
map.changeMouseModel(true);
|
||
// 在地图初始化后禁用平移
|
||
let camera = window.mapConfig;
|
||
console.log(camera, "camera");
|
||
if (camera.isCamera) {
|
||
let cameraHistory = new mars3d.thing.CameraHistory({
|
||
limit: {
|
||
// 限定视角范围
|
||
position: Cesium.Cartesian3.fromDegrees(
|
||
camera.cameraLon,
|
||
camera.cameraLat,
|
||
0
|
||
),
|
||
radius: camera.cameraRadius,
|
||
debugExtent: false
|
||
}
|
||
});
|
||
map.addThing(cameraHistory);
|
||
map.scene.screenSpaceCameraController.minimumZoomDistance = 1000; //相机的高度的最小值
|
||
map.scene.screenSpaceCameraController.maximumZoomDistance = 500000; //相机高度的最大值
|
||
}
|
||
},
|
||
mapNorth() {
|
||
// 1. 获取当前视角
|
||
const currentView = window.marsMap.getCameraView();
|
||
|
||
// 2. 修改视角的heading为0（正北），保留其他参数
|
||
window.marsMap.setCameraView({
|
||
lat: currentView.lat,
|
||
lng: currentView.lng,
|
||
alt: currentView.alt <= 100 ? 8000 : currentView.alt,
|
||
heading: 0, // 指北
|
||
pitch: -90,
|
||
roll: currentView.roll
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.HomeMpa {
|
||
width: 100%;
|
||
height: 100%;
|
||
.zoom-level {
|
||
position: absolute;
|
||
bottom: 0.8%;
|
||
left: 1%;
|
||
z-index: 5;
|
||
color: #fff;
|
||
}
|
||
|
||
#mars3dContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.pointingNorth {
|
||
position: absolute;
|
||
bottom: 5%;
|
||
right: 25%;
|
||
cursor: pointer;
|
||
img {
|
||
width: 35px;
|
||
height: 35px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|