kubbo/kengee-data-screen
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

重新鼓捣地图

Browse Source
This commit is contained in:
aixianling
2024-07-02 18:50:20 +08:00
parent a5cf8e345d
commit fc3ebff6c9
2 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/bgf.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

27
src/views/AppThreeMap.vue
View File

@@ -251,7 +251,7 @@ export default {
* @desc 创建相机
* */
setCamera() {
this.camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 1, 2000);
this.camera = new THREE.PerspectiveCamera(10, rootEl.innerWidth / rootEl.innerHeight, 1, 2000);
this.camera.up.x = 0;
this.camera.up.y = 0;
this.camera.up.z = 1;
@@ -267,16 +267,16 @@ export default {
this.renderer.setPixelRatio(window.devicePixelRatio * 1);
this.renderer.sortObjects = true; // 渲染顺序
this.renderer.setClearColor('#212121');
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setSize(rootEl.innerWidth, rootEl.innerHeight);
rootEl.appendChild(this.renderer.domElement);
function onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.aspect = rootEl.innerWidth / rootEl.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setSize(rootEl.innerWidth, rootEl.innerHeight);
}
window.addEventListener('resize', onWindowResize.bind(this), false);
rootEl.addEventListener('resize', onWindowResize.bind(this), false);
}
/**
@@ -304,8 +304,8 @@ export default {
let that = this;
function onMouseMove(event) {
const x = (event.clientX / window.innerWidth) * 2 - 1; //标准设备横坐标
const y = -(event.clientY / window.innerHeight) * 2 + 1; //标准设备纵坐标
const x = (event.clientX / rootEl.innerWidth) * 2 - 1; //标准设备横坐标
const y = -(event.clientY / rootEl.innerHeight) * 2 + 1; //标准设备纵坐标
const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标
//标准设备坐标转世界坐标
const worldVector = standardVector.unproject(that.camera);
@@ -354,7 +354,7 @@ export default {
* @desc 创建地面函数
* */
makeGround() {
const maps = new THREE.TextureLoader().load('/bgf.png');
const maps = new THREE.TextureLoader().load('http://10.0.97.209/presource/datascreen/img/bgf.png');
maps.wrapS = maps.wrapT = THREE.RepeatWrapping;
maps.repeat.set(14, 14); // 纹理 y,x方向重铺
maps.needsUpdate = false; // 纹理更新
@@ -476,9 +476,16 @@ export default {
})
}
},
watch: {
search: {
immediate: true, deep: true, handler() {
const {$waitFor} = window
this.getData().then(() => $waitFor(this.geoMap)).then(() => this.geoMap.addMarkers())
}
}
},
mounted() {
Promise.all([this.getData(),
this.loadLib()]).then(() => {
this.loadLib().then(() => {
this.geoMap = this.initMap();
this.geoMap.init();
})