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 创建相机 * @desc 创建相机
* */ * */
setCamera() { 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.x = 0;
this.camera.up.y = 0; this.camera.up.y = 0;
this.camera.up.z = 1; this.camera.up.z = 1;
@@ -267,16 +267,16 @@ export default {
this.renderer.setPixelRatio(window.devicePixelRatio * 1); this.renderer.setPixelRatio(window.devicePixelRatio * 1);
this.renderer.sortObjects = true; // 渲染顺序 this.renderer.sortObjects = true; // 渲染顺序
this.renderer.setClearColor('#212121'); this.renderer.setClearColor('#212121');
this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setSize(rootEl.innerWidth, rootEl.innerHeight);
rootEl.appendChild(this.renderer.domElement); rootEl.appendChild(this.renderer.domElement);
function onWindowResize() { function onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.aspect = rootEl.innerWidth / rootEl.innerHeight;
this.camera.updateProjectionMatrix(); 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; let that = this;
function onMouseMove(event) { function onMouseMove(event) {
const x = (event.clientX / window.innerWidth) * 2 - 1; //标准设备横坐标 const x = (event.clientX / rootEl.innerWidth) * 2 - 1; //标准设备横坐标
const y = -(event.clientY / window.innerHeight) * 2 + 1; //标准设备纵坐标 const y = -(event.clientY / rootEl.innerHeight) * 2 + 1; //标准设备纵坐标
const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标 const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标
//标准设备坐标转世界坐标 //标准设备坐标转世界坐标
const worldVector = standardVector.unproject(that.camera); const worldVector = standardVector.unproject(that.camera);
@@ -354,7 +354,7 @@ export default {
* @desc 创建地面函数 * @desc 创建地面函数
* */ * */
makeGround() { 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.wrapS = maps.wrapT = THREE.RepeatWrapping;
maps.repeat.set(14, 14); // 纹理 y,x方向重铺 maps.repeat.set(14, 14); // 纹理 y,x方向重铺
maps.needsUpdate = false; // 纹理更新 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() { mounted() {
Promise.all([this.getData(), this.loadLib().then(() => {
this.loadLib()]).then(() => {
this.geoMap = this.initMap(); this.geoMap = this.initMap();
this.geoMap.init(); this.geoMap.init();
}) })