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-04 17:58:23 +08:00
parent 335d35a16f
commit 586dd1bfb7
1 changed files with 77 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/views/AppThreeMap.vue
View File

@@ -16,6 +16,7 @@ export default {
const {$waitFor, THREE, $loadScript} = window const {$waitFor, THREE, $loadScript} = window
return $waitFor(THREE).then(() => Promise.all([ return $waitFor(THREE).then(() => Promise.all([
`http://10.0.97.209/presource/datascreen/js/three/js/controls/OrbitControls.js`, `http://10.0.97.209/presource/datascreen/js/three/js/controls/OrbitControls.js`,
// `http://10.0.97.209/presource/datascreen/js/renderers/CSS3DRenderer.js`,
].map(e => $loadScript('js', e)))) ].map(e => $loadScript('js', e))))
}, },
initMap() { initMap() {
@@ -23,6 +24,7 @@ export default {
const rootEl = this.$el const rootEl = this.$el
const root = this const root = this
const scale = 4 const scale = 4
const transform = (o, n, t) => new TWEEN.Tween(o).to(n, t).start();
class GeoMap { class GeoMap {
constructor() { constructor() {
@@ -33,9 +35,10 @@ export default {
this.controls = null; // 控制器 this.controls = null; // 控制器
this.mapGroup = []; // 组 this.mapGroup = []; // 组
this.meshList = []; // 接受鼠标事件对象 this.meshList = []; // 接受鼠标事件对象
this.selectObject = null; // 当前选中对象 this.selectedObject = null; // 当前选中对象
this.loopIndex = 0; // 循环标记 this.loopIndex = 0; // 循环标记
this.cameraPath = null; // 相机运动轨迹 this.cameraPath = null; // 相机运动轨迹
this.mouse = new THREE.Vector2();
} }
/** /**
@@ -302,7 +305,7 @@ export default {
this.renderer = new THREE.WebGLRenderer({antialias: true}); this.renderer = new THREE.WebGLRenderer({antialias: true});
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(0xffffff, 0);
this.renderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight); this.renderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
rootEl.appendChild(this.renderer.domElement); rootEl.appendChild(this.renderer.domElement);
@@ -337,67 +340,89 @@ export default {
* */ * */
bindMouseEvent() { bindMouseEvent() {
let that = this; const that = this, _this = this;
const raycaster = new THREE.Raycaster();
function onMouseMove(event) { function onMouseMove(event) {
const x = (event.clientX / rootEl.offsetWidth) * 2 - 1; //标准设备横坐标 const {top, left, width, height} = rootEl.getBoundingClientRect();
const y = -(event.clientY / rootEl.offsetHeight) * 2 + 1; //标准设备纵坐标 // const clientX = event.clientX - left
const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标 // const clientY = event.clientY - top
//标准设备坐标转世界坐标
const worldVector = standardVector.unproject(that.camera); that.mouse.x = (event.clientX / width) * 2 - 1; //标准设备横坐标
//射线投射方向单位向量(worldVector坐标减相机位置坐标) that.mouse.y = -(event.clientY / height) * 2 + 1; //标准设备纵坐标
const ray = worldVector.sub(that.camera.position).normalize(); // const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标
//创建射线投射器对象 // //标准设备坐标转世界坐标
let raycaster = new THREE.Raycaster(that.camera.position, ray); // const worldVector = standardVector.unproject(that.camera);
//返回射线选中的对象 // //射线投射方向单位向量(worldVector坐标减相机位置坐标)
let intersects = raycaster.intersectObjects(that.meshList); // const ray = worldVector.sub(that.camera.position).normalize();
if (intersects.length) { // //创建射线投射器对象
if (intersects[0].object.parent && intersects[0].object.parent._groupType === 'areaBlock') { // let raycaster = new THREE.Raycaster(that.camera.position, ray);
if (that.selectObject !== intersects[0].object.parent) { // //返回射线选中的对象
if (that.selectObject) { // let intersects = raycaster.intersectObjects(that.meshList);
transiform(that.selectObject.position, { // if (intersects.length) {
x: that.selectObject.position.x, // if (intersects[0].object.parent && intersects[0].object.parent._groupType === 'areaBlock') {
y: that.selectObject.position.y, // if (that.selectObject !== intersects[0].object.parent) {
z: 0 // if (that.selectObject) {
}, 100); // transiform(that.selectObject.position, {
transiform(intersects[0].object.parent.position, { // x: that.selectObject.position.x,
x: intersects[0].object.parent.position.x, // y: that.selectObject.position.y,
y: intersects[0].object.parent.position.y, // z: 0
z: 0.8 // }, 100);
}, 100); // transiform(intersects[0].object.parent.position, {
that.selectObject = intersects[0].object.parent; // x: intersects[0].object.parent.position.x,
} else { // y: intersects[0].object.parent.position.y,
transiform(intersects[0].object.parent.position, { // z: 0.8
x: intersects[0].object.parent.position.x, // }, 100);
y: intersects[0].object.parent.position.y, // that.selectObject = intersects[0].object.parent;
z: 0.8 // } else {
}, 100); // transiform(intersects[0].object.parent.position, {
that.selectObject = intersects[0].object.parent; // x: intersects[0].object.parent.position.x,
} // y: intersects[0].object.parent.position.y,
} // z: 0.8
} // }, 100);
} // that.selectObject = intersects[0].object.parent;
// }
// }
// }
// }
} }
function transiform(o, n, t) { function onPointerMove() {
new TWEEN.Tween(o).to(n, t).start(); if (_this.selectedObject) {
_this.selectedObject.material.color.set(0xffffff);
_this.selectedObject = null;
}
if (raycaster) {
const intersects = raycaster.intersectObject(_this.markers);
// console.log('select group', intersects)
if (intersects.length > 0) {
const res = intersects.filter(function (res) {
return res && res.object;
})[intersects.length - 1];
if (res && res.object) {
_this.selectedObject = res.object;
_this.selectedObject.material.color.set('#f00');
}
}
}
} }
const onClick = evt => { const onClick = evt => {
// 计算鼠标位置
const mouseX = (evt.clientX / window.innerWidth) * 2 - 1;
const mouseY = -(evt.clientY / window.innerHeight) * 2 + 1;
// 创建一个射线投射器 // 创建一个射线投射器
const raycaster = new THREE.Raycaster(); raycaster.setFromCamera(this.mouse, this.camera);
raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), this.camera); console.log(raycaster.intersectObject(this.markers, true))
const marker = this.markers.find(e => raycaster.intersectObject(e).length > 0) const marker = this.markers.find(e => raycaster.intersectObject(e, true).length > 0)
if (marker) {
console.log("选取的点:", marker)
const {$glob} = window const {$glob} = window
this.$storeBoard.search.storeCode = marker.data?.storeCode root.$storeBoard.search.storeCode = marker.data?.storeCode
$glob.group = '9f299712-5549-413b-a93b-7c3e3b5bfadb' $glob.group = '9f299712-5549-413b-a93b-7c3e3b5bfadb'
} }
}
window.addEventListener('mousemove', onMouseMove, false); window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('click', onClick, false); // rootEl.addEventListener('pointermove', onPointerMove);
rootEl.addEventListener('click', onClick);
} }
makeGround() { makeGround() {